Want to create interactive content? It’s easy in Genially!

Get started free

Web Dev Foundations - HTML Lesson

Vicki D Bealman

Created on February 22, 2024

Start designing with a free template

Discover more than 1500 professional designs like these:

Animated Chalkboard Presentation

Genial Storytale Presentation

Blackboard Presentation

Psychedelic Presentation

Chalkboard Presentation

Witchcraft Presentation

Sketchbook Presentation

Explore all templates

Transcript

Dr. Vicki Bealman's

HTML

Lessons from Web Development Foundations

SECTION 1

HTML INTRODUCTION

What is HTML

  • HTML stands for Hyper Text Markup Language
  • HTML is the standard markup language for creating Web pages
  • HTML describes the structure of a Web page
  • HTML consists of a series of elements
  • HTML elements tell the browser how to display the content
  • HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

Simple HTML Document

HTML Element

Web Browser

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly. A browser does not display the HTML tags, but uses them to determine how to display the document:

HTML page structure

Here is a visualization of an HTML page structure:

Note: The content inside the <body> section will be displayed in a browser. The content inside the <title> element will be shown in the browser's title bar or in the page's tab.

SECTION 2

HTML Basic Examples

HTML Documents

<!DOCTYPE> Declaration

HTML HEADINGS

HTML headings are defined with the <h1> to <h6> tags.

  • <h1> defines the most important heading.
  • <h6> defines the least important heading:

HTML Paragraphs

HTML paragraphs are defined with the <p> tag:

HTML Links

HTML links are defined with the <a> tag:

  • The link's destination is specified in the href attribute.
  • Attributes are used to provide additional information about HTML elements.

HTML images

HTML images are defined with the <img> tag. The source file (src), alternative text (alt), width, and height are provided as attributes:

SECTION 3

html elements

html element

An HTML element is defined by a start tag, some content, and an end tag.

nested html elements

HTML elements can be nested (this means that elements can contain other elements). All HTML documents consist of nested HTML elements. The example contains four HTML elements (<html>, <body>, <h1> and <p>):

nested html elements Example Explained

The <html> element is the root element and it defines the whole HTML document. It has a start tag <html> and an end tag </html>. Then, inside the <html> element there is a <body> element:

<body> element

The <body> element defines the document's body. It has a start tag <body> and an end tag </body>. Then, inside the <body> element there are two other elements: <h1> and <p>:

<body> element

The <h1> element defines a heading. It has a start tag <h1> and an end tag </h1>: The <p> element defines a paragraph. It has a start tag <p> and an end tag </p>:

empty html elements

HTML elements with no content are called empty elements. The <br> tag defines a line break, and is an empty element without a closing tag:

SECTION 4

html attributes

html attributes

  • All HTML elements can have attributes
  • Attributes provide additional information about elements
  • Attributes are always specified in the start tag
  • Attributes usually come in name/value pairs like: name="value"

href Attribute

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:

src Attribute

The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed: There are two ways to specify the URL in the src attribute: 1. Absolute URL - Links to an external image that is hosted on another website. Example: src="https://www.w3schools.com/images/img_girl.jpg". 2. Relative URL - Links to an image hosted within the website. Here, the URL does not include the domain name. If the URL begins without a slash, it will be relative to the current page. Example: src="img_girl.jpg". If the URL begins with a slash, it will be relative to the domain. Example: src="/images/img_girl.jpg". Tip: It is almost always best to use relative URLs. They will not break if you change domain.

width & height Attribute

The <img> tag should also contain the width and height attributes, which specify the width and height of the image (in pixels):

alt Attribute

The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to a slow connection, or an error in the src attribute, or if the user uses a screen reader.

style Attribute

The style attribute is used to add styles to an element, such as color, font, size, and more.

lang Attribute

You should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers. The example specifies English as the language and United States as the country:

title Attribute

The title attribute defines some extra information about an element. The value of the title attribute will be displayed as a tooltip when you mouse over the element:

SECTION 5

html headings

html headings

HTML headings are titles or subtitles you want to display on a webpage.

html headings

HTML headings are defined with the <h1> to <h6> tags.

  • <h1> defines the most important heading.
  • <h6> defines the least important heading.
Headings Are Important Search engines use the headings to index the structure and content of your web pages. Users often skim a page by its headings. It is important to use headings to show the document structure. <h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.

SECTION 6

html paragraphs

html paragraphs

The HTML <p> element defines a paragraph. A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.

html display

You cannot be sure how HTML will be displayed. Large or small screens, and resized windows will create different results. With HTML, you cannot change the display by adding extra spaces or extra lines in your HTML code. The browser will automatically remove any extra spaces and lines when the page is displayed:

html horizontal rules

The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule. The <hr> element is used to separate content (or define a change) in an HTML page:

html line breaks

The HTML <br> element defines a line break. Use <br> if you want a line break (a new line) without starting a new paragraph:

poem problem

Solution - The HTML <pre> Element The HTML <pre> element defines preformatted text. The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks:

This poem will display on a single line:

SECTION 7

html styles

html styles

The HTML style attribute is used to add styles to an element, such as color, font, size, and more.

html style attribute

Setting the style of an HTML element, can be done with the style attribute. The HTML style attribute has the following syntax: The property is a CSS property. The value is a CSS value.

background color

The CSS background-color property defines the background color for an HTML element.

text color

The CSS color property defines the text color for an HTML element:

fonts

The CSS font-family property defines the font to be used for an HTML element:

text size

The CSS font-size property defines the text size for an HTML element:

text alignment

The CSS text-align property defines the horizontal text alignment for an HTML element:

SECTION 8

html text formatting

text formatting

HTML contains several elements for defining text with a special meaning.

html formatting elements

Formatting elements were designed to display special types of text:

SECTION 9

html comments

html comment tag

You can add comments to your HTML source by using the following syntax: Notice that there is an exclamation point (!) in the start tag, but not in the end tag.

Note: Comments are not displayed by the browser, but they can help document your HTML source code.

add comments

With comments you can place notifications and reminders in your HTML code:

hide content

Comments can be used to hide content. This can be helpful if you hide content temporarily: You can also hide more than one line. Everything between the <!-- and the --> will be hidden from the display.

hide inline content

Comments can be used to hide parts in the middle of the HTML code.

SECTION 10

colors

html colors

HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values. Color Names In HTML, a color can be specified by using a color name:

background color

You can set the background color for HTML elements:

text color

You can set the color of text:

border color

You can set the color of borders:

SECTION 11

html css

html styles - css

CSS stands for Cascading Style Sheets. CSS saves a lot of work. It can control the layout of multiple web pages all at once. What is CSS? Cascading Style Sheets (CSS) is used to format the layout of a webpage. With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more!

using css

CSS can be added to HTML documents in 3 ways:

  • Inline - by using the style attribute inside HTML elements
  • Internal - by using a <style> element in the <head> section
  • External - by using a <link> element to link to an external CSS file
The most common way to add CSS, is to keep the styles in external CSS files. However, in this tutorial we will use inline and internal styles, because this is easier to demonstrate, and easier for you to try it yourself.

inline css

An inline CSS is used to apply a unique style to a single HTML element. An inline CSS uses the style attribute of an HTML element. The following example sets the text color of the <h1> element to blue, and the text color of the <p> element to red:

internal css

An internal CSS is used to define a style for a single HTML page. An internal CSS is defined in the <head> section of an HTML page, within a <style> element. The following example sets the text color of ALL the <h1> elements (on that page) to blue, and the text color of ALL the <p> elements to red. In addition, the page will be displayed with a "powderblue" background color:

external css

An external style sheet is used to define the style for many HTML pages. To use an external style sheet, add a link to it in the <head> section of each HTML page: The external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension.

styles.css

Here is what the "styles.css" file looks like:

css colors, fonts, sizes

Here, we will demonstrate some commonly used CSS properties. You will learn more about them later. The CSS color property defines the text color to be used. The CSS font-family property defines the font to be used. The CSS font-size property defines the text size to be used.

css border

The CSS border property defines a border around an HTML element. Tip: You can define a border for nearly all HTML elements.

css padding

The CSS padding property defines a padding (space) between the text and the border.

css margin

The CSS margin property defines a margin (space) outside the border.

link to external css

External style sheets can be referenced with a full URL or with a path relative to the current web page.

SECTION 12

html links

html links

HTML links are hyperlinks. You can click on a link and jump to another document. When you move the mouse over a link, the mouse arrow will turn into a little hand. Syntax The HTML <a> tag defines a hyperlink. It has the following syntax:

html links - target attribute

By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.

absolute vs relative url

Both examples previously are using an absolute URL (a full web address) in the href attribute. A local link (a link to a page within the same website) is specified with a relative URL (without the "https://www" part):

use image as link

To use an image as a link, just put the <img> tag inside the <a> tag:

link to email address

Use mailto: inside the href attribute to create a link that opens the user's email program (to let them send a new email):

button as link

To use an HTML button as a link, you have to add some JavaScript code. JavaScript allows you to specify what happens at certain events, such as a click of a button:

link titles

The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.

SECTION 13

images

html images

Images can improve the design and the appearance of a web page.

HTML Image Syntax

src attribute

The required src attribute specifies the path (URL) to the image. Note: When a web page loads, it is the browser, at that moment, that gets the image from a web server and inserts it into the page. Therefore, make sure the image actually stays in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon and the alt text are shown if the browser cannot find the image.

alt attribute

The required alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). The value of the alt attribute should describe the image:

image width & height

You can use the style attribute to specify the width and height of an image.

image width & height

You can use the style attribute to specify the width and height of an image.

images in another folder

If you have your images in a sub-folder, you must include the folder name in the src attribute:

images on another server

Some web sites point to an image on another server. To point to an image on another server, you must specify an absolute (full) URL in the src attribute:

animated images

HTML allows animated GIFs:

image as link

To use an image as a link, put the <img> tag inside the <a> tag:

image floating

Use the CSS float property to let the image float to the right or to the left of a text:

SECTION 14

html tables

tables

HTML tables allow web developers to arrange data into rows and columns.

define html table

A table in HTML consists of table cells inside rows and columns.

table cells

Each table cell is defined by a <td> and a </td> tag. (td stands for table data.) Everything between <td> and </td> are the content of the table cell.

table rows

Each table row starts with a <tr> and ends with a </tr> tag. tr stands for table row.

table headers

Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of the <td> tag: th stands for table header.

SECTION 15

html lists

html lists

HTML lists allow web developers to group a set of related items in lists.

unordered lists

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets (small black circles) by default:

ordered lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default:

SECTION 15

Html div

<div>

The <div> element is by default a block element, meaning that it takes all available width, and comes with line breaks before and after.

<div> as container

The <div> element is often used to group sections of a web page together.

<div> center aligned

If you have a <div> element that is not 100% wide, and you want to center-align it, set the CSS margin property to auto.

multiple <div> elements

You can have many <div> containers on the same page.

SECTION 15

html class attribute

class attribute

The class attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific class name. In the following example we have three <div> elements with a class attribute with the value of "city". All of the three <div> elements will be styled equally according to the .city style definition in the head section:

class syntax

To create a class; write a period (.) character, followed by a class name. Then, define the CSS properties within curly braces { }:

multiple classes

HTML elements can belong to more than one class. To define multiple classes, separate the class names with a space, e.g. <div class="city main">. The element will be styled according to all the classes specified. In the example, the first <h2> element belongs to both the city class and also to the main class, and will get the CSS styles from both of the classes:

SECTION 15

html iframe

iframes

An HTML iframe is used to display a web page within a web page. HTML Iframe Syntax The HTML <iframe> tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document.

iframes width & height

Use the height and width attr ibutes to specify the size of the iframe. The height and width are specified in pixels by default: