Overview
This week we will learn about HTML and how it is used to establish a structure for our website. After reviewing information about HTML elements and tags, students will build a basic web page and submit it for review. By the end of this week, students will be able to identify various tags and use them on a web page.
What is HTML?
There are three major components of front-end web development:
- Structure
- Style
- Interactivity
HTML stands for HyperText Markup Language and represents the structure of a web page. It is based on the concept of tags that markup the document. Those tags allow the browser to interpret .html files and present them correctly to users on the page. Each tag begins and ends with an angled bracket.
<p class=para>This is a paragraph.</p>
The bold text directly above is an HTML element. Elements are made up of tags, attributes, values, and content. The <p> and </p> parts are the starting and ending tags. class is the attribute and para is the value you are providing for the attribute. Everything between the starting and ending tags is the content.
Those 4 parts are what makes up the content for pages on the internet. Since every web page is just text and images, you can view the source of the code at any time. To do so, right-click a web page and select View Source or Inspect Element.
View Source will usually bring up a separate web page with all the HTML being used. Inspect Element will pull up your browsers web developer tools and the object you clicked on the page will be highlighted. I would recommend doing this activity in Google Chrome as it has some very powerful tools for working with websites.
In HTML, some tags require ending tags and others do not. <p>, <div>, <span>, <strong>, <em>, and many others require a closing tag which looks like the following: </tag>
Tag is replaced by the name of the tag. <br>, <hr>, and <img> are examples of tags that dont require a closing tag and can be written without any slashes.
Tags in HTML are often nested within each other. An example is <ul> and <li>. <ul> is unordered list and <li> is list item and they appear together as shown below.
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Tags can be nested over and over, but you want your HTML to be tidy and should code in a way that allows you to keep your code uncluttered. If you open a tag inside of another tag, you must close it unless it doesnt require a closing tag.
Using semantic markup to organize content and ensuring that your tags are closed correctly are important for making your website more accessible. Many users access the web in a variety of ways and inaccessible websites prevent them from receiving the same quality of services or information.
The table below contains some very common HTML tags along with an explanation of their purpose. Most of these tags are ones you may have seen before, but it doesnt include some of the newer semantic tags in HTML 5.
| Tag Name | Purpose |
| <!Doctype html> | Not really an HTML tag but more like information for the browser about what type of document it should expect. This one is for the latest version of HTML, which is HTML 5, and is the only acceptable one for this course. It always comes first in an HTML document and doesnt have an end tag. |
| <html> | This is the root of an HTML document and should wrap all other HTML elements. You should always use the lang attribute with this tag to define your web pages language. This is helpful for search engines/browsers. |
| <head> | This is the head of an HTML document and typically contains information about the document inside of metatags. Things in this tag do not appear on the web page. |
| <title> | This is the title of an HTML document and the content inside of the tags usually appears in the tab of the browser window. It goes inside of the <head> tag and is required for all HTML documents. |
| <body> | This defines the body of an HTML document. Elements inside of this tag will appear on the page. |
| <h1> <h6> | Defines headings in a document. h1 is the most important while h6 is the least important. In general, only one h1 should be used per page. |
| <p> | Defines a paragraph. |
| <ul> | Unordered list. This will display a list with bullet points as the default style. |
| <ol> | Ordered list. This will display a list with numbers as the default style. |
| <li> | List item. This tag goes inside of <ul> and <ol> tags to display a single item. |
| <em> | Defines emphasized text that is displayed in italic. |
| <strong> | Defines text with strong importance and is usually displayed in bold. |
| <table> | Defines a table in a document. This must contain tr and th/td tags at the very least. |
| <thead> | Used to group header content in a table. It is normally used for the first row of a table. |
| <tbody> | Used to group the body content in an HTML table. If there is no footer for the table, this is used for the rest of the rows in a table. |
| <tr> | Defines a row in a table. It must contain th or td tags inside of it for columns |
| <th> or <td> | Defines a column in a table. <th> should be used for the first row in a table (which should be in a <thead> tag) while <td> should be used in rows after that (those rows should be in a <tbody> tag). |
| <br> | Defines a line break and is used to break text content apart. This tag does not have an end tag. |
| <hr> | Horizontal rule. This will display a horizontal line across the screen. This tag does not have an end tag. |
| <img> | Displays an image. This tag requires two attributes which are src and alt. Src is used to define the source of the image whether its a local image or something on the internet. The alt attribute is important for accessibility and is used to describe the image for visually impaired users or screen readers. This tag does not have an end tag. |
| <div> | Defines a division or section in a web page. It is a container, and all kinds of tags can be placed inside of it. It is typically used with CSS to change the layout of a page. |
| <span> | Like a div, this is also a container. However, this is an inline container which is typically used to mark up a piece of text in a document. An empty div will take up the whole width of a screen while a span tag only takes up the width of the content inside of it. |
| <form> | Defines a form for user input. It can contain a number of tags including <label>, <input>, <textarea>, and <button>. |
| <label> | Defines a label for another HTML element. These are required for forms because it helps with accessibility for all types of users. |
| <input> | Defines an input area for users. The input can come in many types of way depending on the type attribute paired with the input tag. This tag does not have an end tag but requires a type attribute to define the input expected. |
| <button> | Defines a button in a web page. This is typically used with a form to submit user input. The type attribute is necessary to let browsers know what type of button it is. |
How do we use HTML on a page?
To use HTML, we need a text editor and some code. In the lecture notes for this week, Ive provided a file called html-template.html. Feel free to use this file for assignments, project work, etc. I will be using this file to do a live demonstration for all of you. Please follow along as I type things out on the screen. I would recommend making a copy of the html-template file and renaming/keeping it in a place you can access it.
Besides html-template.html, Ive provided a html-1-example file which contains most of the code Ill be writing for the demonstration. Since I tend to improvise, this file contains more generalized information with explanations. If you fall behind during my demonstration, refer to the code in this example file as it will be roughly the same.
Resources/Online Documents
Tutorials
https://www.htmldog.com/guides/html/
https://html.com/ (Read up until Our Other HTML Tutorials and that should suffice) https://www.codecademy.com/learn/learn-html (Interactive, full-blown tutorial you DO NOT have to complete this, but if you want to learn on the side, it helps)
Reference Guides
- https://html.spec.whatwg.org/multipage/ (very technical guide to the whole specification)
- https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
- http://html5doctor.com/element-index/
First HTML Exercise (CW)
Your task is to build a webpage based on requirements given to you. To start this assignment, get the html-exercise.html file from this weeks lecture notes zip folder and open it up in a text editor. This file is also attached to the assignment submission area as well. Add code to the HTML file as described below. All code should be submitted as one HTML file to Blackboard for credit. Almost all the content youll add to the file will go between the <body> </body> tags.
- Fill in the title tag with a title for your webpage
- Add an h1 tag with HTML Exercise between it
- Add a p tag beneath that with a sentence or two about a place you would like to go to for vacation. When you mention the name of the place, wrap it in a strong tag so that it appears bold on the page.
- Create an unordered list with 5 foods you like. Use em tags to make two of your favorite items on that list appear italicized on the page.
- Create an ordered list with your three favorite websites. Use the a tag and href attribute to hyperlink those websites so I can visit them.
- Add another list (unordered or ordered) inside of this list with 2 pages from that website. Ive provided an example using the NYTimes as the website I chose. You do not have to link the pages in the a tag. You can use # for the value of the href attribute and just provide the link text between the tags.
Example for #4
- com
- com
- com
- https://www.nytimes.com/section/science
- https://www.nytimes.com/section/opinion?pagetype=Homepage&action=click& module=Opinion
- Add an image (make sure to fill out the alt tag)
- The image can be from a local source or online. However, if you use a local image, you must submit the image with your file so I can see it.
- Add an hr tag beneath the image so that a line appears next
- Recreate the table below in HTML (dont worry about providing real links or styles)
- Make sure to use tbody, thead, tr, th, and th tags
| Name | Species Type | Favorite Food | |
| Chris | Human | Bacon | [email protected] |
| Scooby Doo | Dog | Scooby Snacks | [email protected] |
| Garfield | Cat | Lasagna | [email protected] |
Reviews
There are no reviews yet.