Dear all, welcome to this new tutorial! In just 13 minutes you are
going to see everything you need to know to start coding in HTML, even
if you start from an absolute beginner level!
HTML is one of the most used markup languages for web development, page
layout and visual graphics. If you visit any page and check its source
code you mostly get an HTML code that the browser translates into visual
and interactive content. The actual version, HTML 5, is even able to run
without the need of third-party extensions such as Adobe Flash. To start
coding you can use any textual editor, such as the free Notepad++ for
Windows or Atom if you own a Mac. Make sure to select the proper
language to get help with useful colors and use your browser to test the
result of your code. To start with HTML type minor than, ! , DOCTYPE
and close with major than. This imposes all the HTML 5 standards and
rules over your document. Below it you can finally write your code,
starting with the html tag. Type an opening tag with minor than, html
and major than and then a closing tag with an additional / . Within
such tag define a head tag and then a body tag, that we are going to
use in a while. The html tag, containing head and body tags, defines
the basic structure of any HTML document, where each tag remains
independent. You may also add blank spaces and vacant lines to improve
readability. Then save the
current script as a .html file in a proper destination folder. Let's
fill the head tag. This part collects all metadata for your site.
With the title tag you add a proper page title, the same that you get
when the page is searched. Make sure to close this tag in the end,
as done with the other tags. Moreover you can add meta tags to add
keywords and description for your page. These make use of the HTML
attributes, such as additional modifiers within the same tag that set
further options and configurations. We are going to see only part of
these attributes in this video. Please check our video description to
learn more. In this case you can make a first meta tag by typing name,
= and then adding keywords as value under " ". Then type content, =
and add all the keywords for your site under " " and separated by commas.
Close this meta tag with major than. In the same way add a second
meta tag to define the main page description, which is usually shown
below the title when the site is searched. At this point save the
file and preview it with your browser with its complete path, name
and file format. The page is still completely blank but includes the
title above and all metadata if you check its source code. To add
content, text or page layout you have to work with the body tag. Let's
start with some text. Text titles (or headings) are realized with h
tags plus a number from 1 to 6, from the biggest title to the smallest.
After the opening tag define the proper heading and then close the tag
with an additional / . Any new content after the h tag will start
from a new line. Whereas use the p tag to write any text paragraph.
In respect to the h tag this follows a normal text style, neither
bigger or in bold. Each p tag is indeed an entire and independent
paragraph, so when you add another p tag this starts from a new line with
proper spacing from the previous paragraph. If text is too long you
can continue on a new line with a single br tag or drop an hr tag to
add an horizontal separator. The text paragraph uses a black font color
and a default font family that may change depending on the browser
you use. To change the text style you have to add proper tags within
the p tag, such as b or strong to make the text bold, u to make it
underlined, em to make it italic, mark to highlight it in yellow and
del to make it strikethrough. This works on headings as well. Just
make sure to respect the syntax or it may spread the new style over the
whole document. To turn lines into comments type minor than, ! and --
and close the comment with -- and major than. This obliges the browser
to skip this part without erasing it from your HTML document. Now
let's make a second HTML document. This can be seen as the second
page of this simple website. You can drop a numbered list with the ol
tag, using li tags for each line that gets ordered automatically. All
these tag require a closing tag. You can also add a type attribute
to change the format of the list. Whereas use the ul tag to make a
simple non-ordered list instead. Now let's build a table! With the
table tag you drop a table by defining each cell content row per row:
use the tr tag to set an entire row and then use the th tag to type
each cell content, column per column, from left to right, following a
table header style. With other tr tags you add other rows, using td
tags for a normal text format. Just make sure to add some spacing to
keep the cells in line. Moreover you can add the border attribute to
apply table borders with a proper thickness, always under " " .
To add hyperlinks include any piece of text within the a tag and
add the address link under " " as href attribute. This can be either an
online URL or any offline file in your computer. By default it opens
within the same browser tab unless you add the target attribute with
_blank under " " to open it on a new tab instead. To add images use
the img tag, one per each image. With the src attribute define the
complete path of the image file with name and format, using dot
to start from the location of your current HTML document. The img tag does not need any closing tag.
Then include the alt attribute with any alternative text in case the image does
not load or its link is broken.
The image opens with its default size. You can adjust it by
adding width and height attributes with specific pixel values. All these
HTML tags can be combined together: for example you can build any
table with several images inside its cells. To include video files
use the video tag, with width and height attributes to fix its size
in pixels (that must match the original video) and the controls keyword
to add a basic and useful player. Then continue with a source tag
with the src attribute defining the file path and type to set the
video format between .mp4 or .ogg.
In the same way you can import audio files with
the audio tag, with controls, src and type attributes, using audio-mpeg
to include .mp3 files. You can also embed any YouTube video with
the iframe tag. Define width and height and then an src attribute
with the complete YouTube link. Now let's see the basics of text
formatting with the style attribute. This can be added within a p tag to
change its appearance. You can type color , : and the
corresponding hexadecimal code to change the color for the whole text
paragraph. Check our video description to find a free source for all
hexadecimal color codes! Moreover you can add a ; and go ahead with
text-align:center to apply a central alignment on such paragraph or
background-color to add any colored background. These attributes can
also be applied to the whole page if added inside the body tag. In
this example a red background is applied on the whole page. There are
really loads of formats that can be applied with the style attribute.
You can learn more from the useful links in the video description!
All these style attributes are Inline, so specific to each single tag
that include these. You may consider Outline attribute styles to
change the format of whole html tags. To do so include a style tag
within the head tag and define a set of properties for each html tag, in
this case h1 headings, p paragraphs or a links. Add { and then all the
properties separated by ; and on a new line to improve readability.
In this case all the h1 tags get centered and colored in fuchsia and
all the p tags get colored in red. Whereas h2 tags won't get any
special formatting since no style has been attached to them. If you start
getting a long list you may think to apply all these styles through
an external file called Cascading Style Sheet (CSS). On a new file
define all the styles to be applied for each html tag as seen and
save all as a .css file. At this point attach the file within the
head tag of your HTML document with the link tag, using 'stylesheet'
as rel attribute and the complete file path as href. If you try to
comment such link, you will get all your tags with default formatting
back again. This is all you need to know to start coding with HTML!
Open our video description to download a very simple website complete
with CSS file attached!
Thank you for watching this super short tutorial!
Subscribe to get more free and outstanding videos in the future!