HTML
Before We Begin...
• This is for Beginners
• Little to no CSS
• We will focus on HTML5 only
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
What is HTML?
• HTML stands for Hyper Text Markup Language
• NOT a programming Language
• Used to create and present webpages / documents
• Building blocks of the Web
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
What We Need to Start?
• A web browser (Pick one)
◇ Google Chrome
◇ Mozilla Firefox
◇ Safari
◇ Edge
◇ IE (please don't)
• A text editor (Pick one)
◇ Sublime text
◇ Atom.io
◇ Brackets
◇ Notepad++ (Windows)
◇ TextMate (Mac)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Creating an HTML File
• Does NOT need a server
• Files must be end with the .html extension
• Runs in a web browser (Chrome, Firefox etc.)
• index.html is the root / home page of a website
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Tag Syntax
• Elment names surrounded by angle brackets
• Normally come in pairs (start tag and end tag)
• End tag is usually the same but with a forward slash
• Some tags close themselves (Remnant of XHTML)
<!-- Tag Syntax -->
<tag_name>content<tag_name>
<!-- Examples -->
<h1>About Us</h1>
<p>This is a paragraph</p>
<br /> <!-- self enclosing tag (XTHML sytle) -->
<!-- or -->
<br> <!-- fine in HTML5 -->
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
HTML Page Structure
<!-- html page structure -->
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<h1>My first Heading</h1>
<p>My first paragraph</p>
</body>
</html>
Doctype
• Explains what type of document the page is
• HTML4, HTML5, XHTML etc.
<!-- HTML5 -->
<!DOCTYPE html>
<!-- HTML4.01 Strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- XHTML1.0 Strict -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Inline vs. Block Level Elements
Inline Elements
• Do not start on a new line
• Take only the necessary width
• Examples: <div>, <h1> - <h6>, <p>, <form>
Block Elements
• Start on a new line
• Take full width available
• Examples: <span>, <img>, <a>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Tag Attributes
• All tags can have attributes
• Provide information about an element
• Placed within the start tag
• Key / value pairs (id="someid")
<!--Syntax: tag attributes -->
<tag_name attribute_name="attribute_value"">content</tag_name>
<!-- Example: tag attrbiutes -->
<h1 title="My company">About Us</h1>
• Use attribute target="_blank" to open a link in new tab
<!-- Link example-->
<a href="https://some/uri.com" target="_blank">Click</a>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
HTML5 Semantic Tags
• A semantic element clearly describes its meaning to both the browser and the developer
• Put these witin the <body> tag
<!-- Structure: HTML5 Semantic Tags-->
<body>
<header></header> <!--Logo / social media links -->
<section>
<article>
</article> <!-- blog article -->
<article>
</article> <!-- blog article -->
</section>
<aside> <!-- sidebar content -->
<nav> <!-- Navigation items -->
</nav>
</aside>
<footer> <!-- copyright / privacy policy link -->
</footer>
</body>
<!-- Other HTML5 Semantic Tags -->
<main></main>
<details></details>
• The blog.html contains examples of the HTML5 semantic tags. In addtion, it shows the use of <small> and <meta> tags
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Meta Tags
• Used by search engine
• Found within the <head> tags
<!-- Meta tags -->
<head>
<meta name="description" content="Awesome blog by Traversy Media">
<meta name="keywords" content="web design blog, web dev blog, traversy media">
</head>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
HTML Cheat Sheet
• The cheat sheet examples of the following elements:
| Element | Tag |
|---|
| Header | <h1> to <h6> |
| Link | <a> |
| Ordered List | <li> <ol> |
| Unordered List | <li> <ul> |
| Table | <table> |
| Form | <form> |
| Divider | <div> |
| Horizontal Rule | <hr> |
| Button | <button> |
| Image | <img> |
| Quotation | <blockquote> |
| Abbreviation | <abbr> |
| Citation | <cite> italic style |
Index