[PPT] - HTML Introduction A.Y. 2020/2021 What HTML is HTML stands for PowerPoint Presentation

SLIDE 1

HTML Introduction

A.Y. 2020/2021

SLIDE 2

What HTML is

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.

SLIDE 3

A Simple HTML Document

SLIDE 4

A Simple HTML Document

<!DOCTYPE html> defines that this document is an HTML document

SLIDE 5

A Simple HTML Document

<!DOCTYPE html> defines that this document is an HTML document

<html> is the root element of an HTML page

SLIDE 6

A Simple HTML Document

<!DOCTYPE html> defines that this document is an HTML document

<html> is the root element of an HTML page

<head> contains meta information about the HTML page

SLIDE 7

A Simple HTML Document

<!DOCTYPE html> defines that this document is an HTML document

<html> is the root element of an HTML page

<head> contains meta information about the HTML page

<title> specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)

SLIDE 8

A Simple HTML Document

<!DOCTYPE html> defines that this document is an HTML document

<html> is the root element of an HTML page

<head> contains meta information about the HTML page

<title> specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab) <body> defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

SLIDE 9

A Simple HTML Document

<!DOCTYPE html> defines that this document is an HTML document

<html> is the root element of an HTML page

<head> contains meta information about the HTML page

<title> specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab) <body> defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. <h1> defines a large heading

SLIDE 10

A Simple HTML Document

<!DOCTYPE html> defines that this document is an HTML document

<html> is the root element of an HTML page

<head> contains meta information about the HTML page

<title> specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab) <body> defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. <h1> defines a large heading <p> defines a paragraph

SLIDE 11

What is an HTML Element?

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

<tagname>Content goes here...</tagname>

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1> <p>My first paragraph.</p>

SLIDE 12

Web Browsers

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:

SLIDE 13

HTML Page Structure

SLIDE 14

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important

heading:

SLIDE 15

HTML Paragraphs

HTML paragraphs are defined with the <p> tag

SLIDE 16

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.

SLIDE 17

HTML Images

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

attributes

SLIDE 18

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

SLIDE 19

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

SLIDE 20

HTML Forms

An HTML form is used to collect user input. The user input is most often sent

to a server for processing.

SLIDE 21

HTML Form and Input

https://www.w3schools.com/html/html_forms.asp

SLIDE 22

Getting some practice in HTML

HTML tutorial by W3Schools.com

https://www.w3schools.com/html/default.asp