Exercise 1: Basic HTML Elements and Text Styles
In this Exercise we will use the most fundamental HTML elements to create a simple web page. Use ALL of these tags and attributes to create your homework. Follow the Exercise One Assignment Instructions on BlackBoard. Review DEMO & VIDEO pages as needed.
Prep Work
Name your folderon your desktop: YourLastNameEx1
If you are on a PC, use NotePad to write your code.
If you are on a MAC, use TextEdit to write your code.
Name your First HTML Page: index.html
The DocType
Put this at the top of every HTML page you write. This tells the browser you are using HTML5 to code your document. [Document Type]
<!DOCTYPE html>
Basic HTML Elements (tags)
The Basic HTML Elements are the building blocks of every html web page. Below are their opening and closing states. Use them on every web page you create.
- <html> </html>
- <head> </head>
- <title> </title>
- <body> </body>
HTML Text Formatting Elements
- Block Elements
These elements start a new line, with space above and below them.
These tags are shown with their attributes.
Attributes are used in the opening tag only.
The tags will style the content that is inbetween the opening and closing tags.
The H elements are for Headers or creating headlines in your content. They range in sizes from H1 to H6, making large to small headlines
- <h?> </h?> h1, h2, h3, h4, h5, h6
- align="left", "center", or "right"
The P element is used for paragraphs.
- <p> </p>
- align="left", "center", or "right"
- Grouping Element
The DIV elementThis Element can contain several Block Elements. You can use DIVs to break your page content into "groups" of content
- <div> </div>
- align="left", "center", or "right"
- HTML Inline or Style Elements
These Elements add style to the text. They do not start a new line. They are physical style tags.
Style elements DO NOT contain block elements.
Add style elements to content inside of block elements.
- <em> </em>
- <strong> </strong>
- Empty Elements
Empty Elements do not have a closing tag.
They do not contain content, they give a direction.
The Comment Element
Use this element to write comments to yourself about the work you are doing in the web page. It only shows in the code.
- <!-- Write your Comment Here -->
The BR or Break Element - use to add space between lines
The br element makes a break in the line of text. Using more br tags adds more space. Try adding one and try adding several.
- <br>
The HR or Horizontal Rule - use to add a line between content
The hr element adds a Horizontal Rule which you can add style to by adding the attributes and values
- <hr>
- align="left", "center", or "right"
- size="?" : pixel height
- width="?" : pixel length or percent
- color="?" : #xxxxxx (hex code) or color name