Introduction:
HTML stands for
Hyper Text Markup Language. Every web site uses HTML on the most fundamental level and learning HTML is easy and a great start if you want to learn how to make web sites.
HTML is easy to learn because it's not a programming language, it can be thought of as "formatting" language in a similar way you format things in
Microsoft Word.
HTML Tags.
Opening and closing tags, other tags that don't need closing.
HTML attributes and html elements.
You can start writing HTML in any text editor of your choice such as
Notepad or Notepad++.
The browser interprets HTML from the text version and shows the output (interpreted result) in the browser window. The structure of every HTML page consists of HTML,
HEAD, TITLE and
BODY tags.
When saving
HTML file in
Windows, make sure to select "All
Files" before saving and name the extension "
.html" instead of ".txt" so we can open the file in the browser.
Outline:
Hey what's up guys its clever techie
Okay it's time to learn HTML so we can start creating web sites
Before we begin, it's a good idea to download these images, backgrounds, diagrams and cheat sheet so you can follow along with the video
If the link doesn't work go to
http://clevertechie.com/html-video/ and enter your email, you will be sent a link with all the files right away
HTML is all about tags, this is what the tag looks like
...(show diagram) opening and closing tag, angle brackets, content in between...
Create an empty .html page and open it in the browser of your choice, I'm gonna open it with
Chrome...
Don't forget to pick All Files when saving with .html extension
Show basic tags like STRONG, EM, U
Type a paragraph of text and show how BR tag works, explain what BR tag is (empty element, self closing tag)
Another example of a self closing tag is a horizonal rule HR
Another exception to the rule is HTML comments: tags can have multiple attributes angled brackets with exclamation mark and double dashes
Comments aren't visible in the browser and they are just for us to understand our code better
Another tag that you will see a lot is H1 - H6 tags
Let me show a concept called "nested" html tags called OL and UL and LI that go inside of them
Before moving on to more tags....Show the structure of basic HTML page
What we've done can work, but it's better to have a standard structure with title, head, body, html...
..
Now that we understand how tags work, let me show you attributes: show the diagram
Introduce the FONT tag and color attribute as a simple example
Show HR tag color attribute, set value to black
Explain values a little bit - color can be set to "green", "blue" etc....but you can also use
HEX value
Show how the HEX value can be copied and pasted from: http://www.w3schools.com/colors/colors_picker
.asp
In a similar way we used color attribute for font tag, we can also use bgcolor for background of body tag to change its background color
Explain how different attributes can apply only to certain tags or multiple tags, show the cheat sheet
Show another attribute for BODY tag called the background and set the background image bg/clouds
.jpg, explain the path name
Show
IMG src = "value" tag and attribute (don't forget to self close img tag and mention it)
While we're still on paths, let me introduce the A tag with href attribute which is how we create links in html...
Link to http://www.animalcenter.org/adoptions/kitten-happy-hour/ or http://www.animalcenter.org
Talk about target attribute and the "_blank" value
Talk about multiple attributes used on the same html tags and how the can be inserted anywhere within the html tag
Example: alt, title, src of the IMG tag
Introduce tables, show the diagrams to explain nested tags better (in a similar way we put tags inside of other tags when creating lists...)
Create a table with two rows and two table cells within each row, put some text in the cells right away
Explain how the bgcolor attribute can be applied to each individual cell or row or the whole table (first table, then row then cell)
Just keep playing around with HTML and have fun and eventually you will realize how easy it is!
I'll be putting out another video on
CSS which is how we style web sites and get into some really cool stuff.
And go to clevertechie.com to subscribe to the newsletter, and you will get
updates when HTML guides are released with more advanced techniques, new videos, cheat sheets, diagrams and other updates.
Hope you guys enjoyed this video, please like, share and subscribe, thank you very much for watching! Clever
Techie out.
- published: 08 Mar 2016
- views: 35