Post on 16-Oct-2020
Introduction to HTML
TOOLS
HTML
Hyper-Text Markup Language
The Tag
The Tag
<html>
angle brackets (aka greater-than and less-than)
The Tag
<html>
name
The Tag
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
opening and closing
The Tag
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
opening and closing
The Tag
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
content
The Tag
<p> <strong>Lorem</strong> ipsum dolor sit amet, consect elit. </p>
Tags can contain other tags.
The Document
The Document
<!doctype html> <html lang="en"> <head> <title>Document</title> </head> <body> </body> </html>
The Document
<!doctype html> <html lang="en"> <head> <title>Document</title> </head> <body> </body> </html>
everything goes here in the body tag
Structural Elements
Header
<header> <h1>Super Website</h1> <h2>By Chandler</h2> </header>
Content for the top of a page or major section. Includes things like title, navigation, masthead, etc.
Header
Header
Headers
<h1>REALLY IMPORTANT</h1> <h2>Pretty Important</h2>
<h3>I’m important too!</h3> <h4>Meh, so so</h4>
<h5>I’m not too useful</h5> <h6>Neither am I</h6>
The numbers in a header tag indicate relative importance, NOT the number of this item on the page, i.e. <h3> is the third most important thing, not the third thing.
Headers
You can have multiples of each header tag on the same page. Think of book chapters, each chapter has the same relative importance, so they would all have the same level of header tag.
Headers
Footer
<footer> <p>All content owned by me</p> </footer>
Content at the bottom of a page or major section. Includes things like copyright, site map, etc.
Footer
Footer
Nav
<nav> <a href=“…">A Page</a> <a href=“…">Another Page</a> </nav>
The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
Nav
Nav
OthersHTML5 introduced a number of tags to help you group content together. When each is appropriate is still hard to determine, but they are there for you and sometimes handy.
Section<section> … </section>
“The section element represents a generic document or application section…A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.”
Article<article> … </article>
“The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site… This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.”
Aside<aside> … </aside>
“With aside, it’s crucial to remain aware of its context. When used within an article element, the contents should be specifically related to that article (e.g., a glossary). When used outside of an article element, the contents should be related to the site (e.g., a blogroll, groups of additional navigation, and even advertising if that content is related to the page).”
Div<div> … </div>
Div is the primary workhorse for styling and grouping content. Unlike the other section elements, it has no semantic meaning at all, no rules, just a simple container for stuff making it ideal for cases when a specific container tag won’t work.
Paragraphs
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec felis, ultricies nec, pellentesque eu, pretium quis, sem. </p>
Whitespace (tabs, spaces) is ignored. Or more accurately, all white space collapses into a single space.
Whitespace
Hypertext
Hypertext is the first “ht” in “http” which stands for hypertext transfer protocol.
Hypertext
Anchor (link) Tags
<a href=“http://wikileaks.org”>Wikileaks</a>
attributes are values defined in the opening tag
Anchor (link) Tags
<a href=“http://wikileaks.org”>Wikileaks</a>
for anchor tags, use the “href” attribute to define the target of the link
Images
Img Tags
<img src="kitten.jpg" alt="a kitten">
the src attribute defines the path to the image
Img Tags
<img src="kitten.jpg" alt="a kitten">
the alt attribute provides a text description of the image
Images
Images should be in JPEG, GIF, or PNG format.
Images
File Paths and File Names
“Fully Qualified URL”
<a href="http://foo.com">
“Fully Qualified URL”
<a href="http://foo.com">
Includes the “http://”
Relative File Paths
<img src="foo.jpg">
Relative File Paths
<img src="foo.jpg">
Looks for the file in the same folder as the current one
Case Matters!
<img src="foo.jpg">
Is not the same as
<img src="Foo.jpg">
Case Matters!
<img src="foo.jpg">
Will not work with a file named Foo.jpg
Case Matters!
Always name your files with lower case letters, and replace spaces with -
Case Matters!
becomes
My Awesome Photo.jpg
my-awesome-photo.jpg
index.html
The main file of your site, the first page that people will see, for every website you ever make should be
named “index.html” always, forever.