Hyper Text Markup Language (HTML)

HTML, or HyperText Markup Language, is the fundamental language used to create web pages. It's the backbone of the internet, providing the structure and content for websites. In this unit, we'll delve into the world of HTML, learning how to use tags and attributes to organize text, images, links, and other elements on a webpage. By the end of this unit, you'll have a solid understanding of HTML's syntax and be able to create basic web pages from scratch.

HTML Structure

HTML structure is like a blueprint for a webpage. It defines the layout and content using elements (tags), which are enclosed in angle brackets (<>). The core elements are:

<html>...</html>: The root element that encapsulates the entire document.
<head>...</head>: Contains metadata about the page, such as title, stylesheets, and scripts.
<title>...</title>: Sets the title displayed in the browser's tab.
<body>...</html>: Contains the visible content of the page, like text, images, and links.

<!DOCTYPE html>
<html>
	<head>
		<!-- Website Metadata Goes Here -->
		<title>Website Title</title>
	</head>
	<body>
		<!-- Website Content Goes Here -->
	</body>
</html>

You can see in this short code snippet a very simple skeleton for a website using these core elements. The rest of this unit covers many of the different elements you will use within the "body" to present your website content.

Text Formatting

HTML offers several elements to control the appearance of text on a webpage. We are not covering all of them but here are some of the common ones:

<b>...</b> or <b>...</b>: Makes the text bold.
<i>...</i> or <em>...</em>: Makes the text italicized.
<u>...</u>: Underlines the text.
<p>...</p>: Defines a paragraph.
<h1>...</h1>: Defines headings with h1 being the biggest and h6 the smallest.

This is an h1 header

This is an h2 header

This is an h3 header

This is an h4 header

This is an h5 header

This is an h6 header

Links

Links, also known as hyperlinks, are used to connect one webpage to another or to a specific part of the same page. They provide a way for users to navigate between different web pages and access information easily. We create links using the <a> tag, providing a destination, and defining something to click.

Components of a Link:

<a>...</a> tag: The anchor tag that defines the link.
href: Specifies the URL of the linked resource.
Link text or Image: The visible text or image that the user clicks on to follow the link

Types of Links:

Internal Links: Link to pages within the same website.
External Links: Link to pages on a different website.
Anchor Links: Link to a specific section within the same page.

Link Example:


	<a href="https://omegabluecs.com">Click Here</a>

The example above is an External link, but you can see examples of the other two types on this page. The Syllabus link in the top navigation bar is an Internal link and the links to left are all Anchor links. Right-click on either of them and click Inspect to view their code in your browser.

Images

Images are used to enhance the visual appeal of web pages and convey information in a more engaging way. In HTML, images are inserted using the <img> tag.

The example below is the html for the "Under Construction" image used in various parts of ther site. We need to define the src attribute with the location of the image. This could be within the file structure of your website or a URL from an image on-line.


	<img src="assets\images\under_construction.png">

You can also use images as a link. The modified code below turns the image into a link to the homepage of this website.


	<a href="index.html"><img src="assets\images\under_construction.png"></a>

Lists

Lists are used to present items in a structured format. HTML provides two main types of lists: ordered lists and unordered lists.

Ordered Lists:

Ordered lists display items in a numbered sequence.
Each item is enclosed within a <li> (list item) tag.
The numbers are automatically generated by the browser.

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Unordered Lists:

Unordered lists display items without a specific order.
Each item is also enclosed within a <li> tag.
By default, items are marked with bullets, but you can customize the marker style using CSS.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Tables

Tables are used to organize and present data in a structured format. They consist of rows and columns, where each row represents a record and each column represents a field. If you have ever made a spreadsheet than you have worked with a table before.

Components of a Table:

<table>...</table>: Defines the entire table.
<tr>...</tr>: Defines a table row.
<th>...</th>: Defines a table header cell (usually displayed in bold).
<td>...</td>: Defines a table data cell.

Table Example:

Header 1	Header 2	Header 3
Data 1	Data 2	Data 3
Data 4	Data 5	Data 6

<table>
	<tr>
		<th>Header 1</th>
		<th>Header 2</th>
		<th>Header 3</th>
	</tr>
	<tr>
		<td>Data 1</td>
		<td>Data 2</td>
		<td>Data 3</td>
	</tr>
	<tr>
		<td>Data 4</td>
		<td>Data 5</td>
		<td>Data 6</td>
	</tr>
</table>

Tables have many attributes that can be set: borders, width, cellspacing, cellpadding and many others. With the proper settings (and some CSS Styling) you can make your tables more readable.

Styling

Styling refers to the process of enhancing the visual appearance of web pages. It involves applying various design elements, such as colors, fonts, layouts, and effects, to make the content more visually appealing and user-friendly. We will spend the entire next unit learning about styling with CSS.

Styles can be directly applied to HTML elements using the style attribute. This method is generally less preferred as it mixes content (HTML) and styling (CSS).


	<h1 style="font-size: 108px;">HTML</h1>

HTML

Color

Color is an essential element in web design, used to enhance visual appeal, improve readability, and convey meaning. Using too many colors can be just as bad as not using any, so most brands adopt a color palette. This helps their website form a consistent style and theme. As mentioned before, styling in HTML is not generally the preffered method.


	<h1 style="color: red; font-size: 108px;">HTML</h1>

HTML

Unit Project

Ready to dive into web creation? Let’s put your newfound knowledge to the test! Build your very first website based on the concepts we’ve explored in this unit. Choose a topic that sparks your interest. Remember, this is just the beginning of a journey, so pick something you’re passionate about. We'll continue to expand on your website throughout the course.

Objectives:

Understand the fundamental structure of a web page.
Utilize HTML elements to create a well-organized and informative website.
Apply basic color styling to enhance the visual appearance of the website.
Demonstrate knowledge of basic web design principles.

Requirements:

Create a new HTML file: Name it index.html

Include the basic HTML structure:

<!DOCTYPE html>
<html>
	<head>
		<title>Website Title</title>
	</head>
	<body>
		<!-- Website Content -->
	</body>
</html>

Add a header: Use the <h1> element to create a main heading for your website.
Add content: Use paragraphs (<p>) to write content for your website.
Add links: Use links (<a>) to navigate through your websites and visit others.
Include images: Insert images using the <img> element.
Style the website: Use CSS to style the elements of your website. Consider using properties like color, font-family, font-size, and background-color.
Test your website: Open the index.html file in a web browser to see how it looks.

Checklist:

Does your website have a clear and informative title?
Does the content of your website make sense and is it well-organized?
Are the images relevant to the content and properly displayed?
Is the overall appearance of your website visually appealing?