Introduction to HTML

html 5 logo

Instructor: Chris Fulton

Learning Objectives

  • Explore the history of the Web and HTML
  • Discuss World Wide Web Consortium and purpose
  • Understanding HTML
    • Rules and Syntax of HTML
    • Categories of HTML5 elements
    • Attributes and Hyperlinking to resources
  • Basic HTML document structure
    • Doctype | Root tag | Head tags | Body tags
  • Implementing good coding practices and standards
    • Validating HTML documents | Commenting and indenting code

History of HTML

  • a network is a structure in which infomation and services are shared among devices known as nodes or hosts

  • a client-server network allows clients to access information provided by one or more servers.

    For example, you used a client-side browser to access the html documents of this lecture from a server hosted by amazon somewhere in the world.

Tim Berners Original proposal for hypertext markup

picture of Tim Berners proposal concening the management of general information about accelerators and experiments at CERN. It discusses the problems of loss of information about complex evolving systems and derives a solution based on a distributed hypertext system

History of HTML Cont.

Clients and Server and Internet exist in middle picture

multiple clients can connect to server(s) - this is what makes up the internet.
The largest WAN in existence is the Internet.

  • a network confined to a small geographic area, such as within a building or department, is referred to as a local area network or LAN

  • a network that covers a wider area, such as serveral buildings or cities is called a wide area network or WAN

What does LAN and WAN has to do with the history of HTML?

History of HTML

He did not invent the internet, but gave provided context and usability for the Internet. The fact that the Internet and the World Wide Web are synonymous is many users' minds is a testament to the success of the hypertext approach.

  • in 1989, Timonthy Berners-Lee and other researches needed an information system that would make it easy to locate and share data on the CERN network.

    The solution: develop a system of hypertext documents.

  • Hypertext is a method of organization in which data sources are interconnected through a series of links or hyperlinks

What does HTML Mean?


A web page is a simple text file written in HTML (Hypertext Markup Language) A markup language is a language that describes the content and structure of a document by "marking up" or tagging, different document elements.

HTML Version History

HTML versions

World Wide Web Consortium (W3C)

Adopted Standards

  • No single organization defined the rules or syntax of HTML, which led to problems as different browser supported different flavors of HTML.

  • The World Wide Web Consortium(W3C) was born. The W3C is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards. Led by Web inventor and Director Tim Berners-Lee and CEO Jeffrey Jaffe, W3C's mission is to lead the Web to its full potential.

Understanding HTML

Rules and Syntax

Element composition of the H1 tag.

An HTML tag includes an opening bracket (<), an element name such as h1, and a closing bracket.
The end tag has a slash ( / ) preceding the element.

  • Web page code is a mixture of the text the user sees in the browser surrounded by a variety of markup elements
  • An element is a pair of HTML tags containing content

Void or Empty Elements

  • Some HTML elements contain only a single tag. These are known as void elements
  • Commonly used empty/void elements include:
    • <img src="face.jpg" alt="Happy Face" >
    • <link href="css/style.css" type="text/css" rel="stylesheet" >
    • <br>
    • <meta charset="UTF-8">
Picture of void elements

Attributes in HTML5

							
								<h1 id="honorable"> Those who speak truth  </h1>
							
						

Element attributes provide additional information to the browser about the purpose of the element

HTML5 has less attributes because of CSS

Most empty or void elements require attributes

Linking

Various ways to link to resources image
						
							<a href="fax:1-408-555-5555">1-408-555-5555</a>
							<a href="file:pdf/homework.pdf">homework.pdf</a>
							<a href="ftp://someftpserver.com/">Browse the FTP server</a>
							<a href="geo:44.9727845,-93.2923222">Map Dunwoody</a>
							<a href="https://reacttees.com">Reactttees.com</a>
							<a href="mailto:someone@dunwoody.edu?Subject=HTML">Send mail</a>
						
					

Content Categories

Venn diagram of HTML categories

Basic HTML document structure

HTML Structure Breakdown

HTML structure context

The Structure of basic html page

							
								<!DOCTYPE html>
								<html>
									<head>
										
										<title>Basic Structure </title>
									</head>
									<body>
										<header>
										
										</header>
										
										<footer>
										
										</footer>
									</body>
								</html>


							
						

Structure Continued Using HTML5 elements nested in head

HTML5 tags nested within head tag

Structure Continued Using HTML5 elements nested in body

  • The HTML5 elements for page layout include:
    • <header> - Contains the page header content
    • <nav> - Contains the navigation elements for the page
    • <article> - Contains the primary page content
    • <section> - Defines sections or groupings of page content
    • <aside> - Contains additional content such as a quote or sidebar
    • <figure> - Contains images for the article content
    • <footer> - Contains page footer content
HTML5 page layout

Validating your code

  • Valid code conforms to W3C rules.

  • Valid code enhances browser compatibility, accessibility, and exchange of data
  • The most common mistakes include:
    • No doctype declaration
    • Missing closing tags
    • Missing alt attributes in image elements
    • Incorrect tag nesting
    • Unquoted attributes
  • W3C Validation Service Link
W3C validation image

Video Lectures

Click here for playlist

Helpful HTML Resources