HTML Basics 1 workshop

HTML Basics
WICKS-ALLAN, CAMEO:KEITH “BUDDY” HACKETT

Workshop Description
HTML Basics Part 1: The workshop facilitator will introduce
participants to the basic building blocks of HTML. Elements
such as page framework and individual items will be
introduced. The goal is to have participants identify the
parts of an HTML document. Understanding basic HTML
elements will allow instructors troubleshooting ability with
their D2L pages.

What is HTML?
•Hyper Text Markup Language
•HTML is a set of tags for marking up web pages
•HTML tags define appearance or function of document
content

Tag Examples:
<em> shows text emphasis
<p> defines a paragraph of text
<a> represents a hyperlink (anchor element)
<img> embeds an image in an HTML document

HTML Tags
Tags are the building blocks of an HTML document.
Tags are keywords surrounded by angle brackets. <center>
The second tag or closing tag is written with a forward slash
before the tag name </p>
An element usually has an opening and closing tag. (There
are a few exceptions.)
<tagname>content</tagname>

HTML Tag Resources
A basic list of HTML tags can be found at:
http://abt.cm/1Dlxdqb
An HTML 5 list can be found at:
http://abt.cm/1JZ80us

Parts of an HTML document
The DOCTYPE declaration defines the document type to be HTML
<!DOCTYPE HTML>

The text & tags between <html> and </html> define an HTML document

The text between <head> and </head> provides information about the
document. It delineates a section of an HTML document.
Title for the document
Scripts
Styles
Meta information
More

The text between <title> and </title> provides a title for the document
<title>CBC Sports</title>

The text between <title> and </title> provides a title for the document
The Title tag is nested in the Head section of an HTML document
<title>CBC Sports</title>

The text between <body> and </body> describes the visible page
content. It delineates a section of the HTML document.

The text between <h1> and </h1> defines a heading.
Heading tags found in the body section.
There are six levels of the heading tag.
h1 is the largest and h6 is the smallest.

The text between <p> and </p> defines a paragraph
<p> Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Etiam ipsum augue, porttitor in nisi in, luctus
accumsan mauris. Maecenas blandit vitae dui ac
rhoncus. Vivamus vitae sollicitudin urna. <p>

Parts of an HTML document in HTML

The HTML document as it appears in a browser

Tag Nesting
<html>
<head>
<title>
</title>
</head>
<body>
<h1> </h1>
<p> </p>
</body>
</html>

Attributes
Attributes provide additional information about HTML tags.
Attributes are normally stated in the opening tag.

Anchor tag Attributes
The <a> tag defines a hyperlink.
<a> </a>
It has an attribute href
<a href=""> </a>
The URL or web address is inserted in between the quotation marks
<a href="http://www.cbc.ca"> </a>
The visible text is inserted in between the angled brackets > <
<a href="http://www.cbc.ca">Visit CBC Online!</a>

Image tag Attributes
The <img> tag defines a hyperlink.
<img> </img>
It has an attribute src
<img src="">
The file name is inserted in between the quotation marks.
<img src="smileyface.jpg">
Height and width attributes are added between the “ and the >
<img src="smileyface.jpg" height="42" width="42">

Opening the HTML Editor in D2L
1. Open your Sandbox course on D2L (your name)
2. Click on CONTENT (in the navigation bar)
3. Click on the New button
4. Click Create a File
5. In the bottom right corner of the editor, click on the HTML Source Editor icon
6. The HTML Source Editor opens
7. Now what?
8. Insert HTML tags, attributes and document data
9. Click on Save

Possibly get some help:
HTML Snippets Generator http://www.blindtextgenerator.com/snippets
W3schools HTML snippets http://www.w3schools.com/html/html_basic.asp
HTML code Generator http://www.quackit.com/html/html_generators/html_code_generator.cfm

HTML Basics 1 workshop

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a HTML Basics 1 workshop

Semelhante a HTML Basics 1 workshop (20)

Mais de John Allan

Mais de John Allan (20)

Último

Último (20)

HTML Basics 1 workshop