Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
6 views

Chapter 2 - Introduction to HTML

This document provides an introduction to HTML, covering its definition, structure, and essential elements such as headings, paragraphs, and links. It explains the syntax for creating HTML documents, including the use of attributes and styles, as well as how to format text and create comments. Additionally, it discusses the role of web browsers in rendering HTML and provides examples for practical implementation.

Uploaded by

marjune.gabon07
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
6 views

Chapter 2 - Introduction to HTML

This document provides an introduction to HTML, covering its definition, structure, and essential elements such as headings, paragraphs, and links. It explains the syntax for creating HTML documents, including the use of attributes and styles, as well as how to format text and create comments. Additionally, it discusses the role of web browsers in rendering HTML and provides examples for practical implementation.

Uploaded by

marjune.gabon07
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 59

WD 101: Web

Development &
Application

INTRODUCTION TO HTML
Introduction to HTML
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.
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>

Start tag Element content End tag


<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none
HTML Documents
All HTML documents must start with a document type declaration: <!DOCTYPE
html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.

The <!DOCTYPE> Declaration


The <!DOCTYPE> declaration represents the document type, and helps browsers to
display web pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is:
• <!DOCTYPE html>
Simple HTML Document
<!DOCTYPE html> Example Explained
<html>
<head> The <!DOCTYPE html> declaration defines that this
<title>Page Title</title> document is an HTML5 document
</head> The <html> element is the root element of an HTML
<body> page
The <head> element contains meta information about
<h1>My First Heading</h1>
the HTML page
<p>My first paragraph.</p>
The <title> element specifies a title for the HTML page
</body> (which is shown in the browser's title bar or in the
page's tab)
</html>
The <body> element defines the document's body, and
is a container for all the visible contents, such as
headings, paragraphs, images, hyperlinks, tables, lists,
etc.
The <h1> element defines a large heading
The <p> element defines a paragraph
HTML Page Structure
Below is a visualization of an HTML page structure:
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:
HTML Headings and Paragraphs
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading
HTML paragraphs are defined with the <p> tag
Headings and paragraphs always starts on a new line, and browsers automatically add some white space
(a margin) before and after a paragraph.

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>


<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>
Empty HTML Elements
HTML empty elements (also known as self-closing or void elements) are
elements that do not have any content or closing tags. They represent
elements that are complete in themselves and do not require any child
elements. Some of the most common empty elements in HTML include:

<img>: Defines an image.


<img src="image.jpg" alt="Description of the image">

<br>: Inserts a line break.


<br>

<hr>: Inserts a horizontal rule (a line) to separate content.


<hr>

<input>: Defines an input field for user data.


<input type="text" name="username">
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“

The href Attribute


• The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:
• <a href="https://www.w3schools.com">Visit W3Schools</a>

The src, alt and width and height 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.
• 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.
• The <img> tag should also contain the width and height attributes, which specify the width and height
of the image (in pixels):
HTML Attributes
With a code like this:

<!DOCTYPE html>
<html>
<body>

<a href="https://www.w3schools.com/html">Visit W3Schools!</a>


<br>
<img src="img_girl.jpg" alt="Girl with a jacket" width="300" height="375">

</body>
</html>

We will have…
HTML Attributes
With a code like this:

<!DOCTYPE html>
<html>
<body>

<a href="https://www.w3schools.com/html">Visit W3Schools!</a>


<br>
<img src="img_girl.jpg" alt="Girl with a jacket" width="300" height="375">

</body>
</html>

We will have…
HTML Attributes
With a code like this:

<!DOCTYPE html>
<html>
<body>

<a href="https://www.w3schools.com/html">Visit W3Schools!</a>


<br>
<img src="img_girl.jpg" alt="Girl with a jacket" width="300" height="375">

</body>
</html>

We will have…
HTML Attributes
The style Attribute
The style attribute is used to add styles to an element, such as color, font, size, and more.
• <p style="color:red;">This is a red paragraph.</p>

The 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.

<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>

The 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:

<p title="I'm a tooltip">This is a paragraph.</p>


HTML Attributes
With this code:

<!DOCTYPE html>
<html lang="en-US">
<body>
<h2 style="color: red;">The title Attribute</h2>
<p title="I'm a tooltip">Mouse over this paragraph, to display the title attribute as a
tooltip.</p>
</body>
</html>

Well have something like this…


Single or Double Quotes?
Double quotes around attribute values are the most common in HTML, but single quotes can also be used.
In some situations, when the attribute value itself contains double quotes, it is necessary to use single
quotes:

• <p title='John "ShotGun" Nelson'>

Or vice versa:
• <p title="John 'ShotGun' Nelson">
HTML Style Attribute
The HTML style attribute is used to add styles to an element, such as color, font, size, and more.
Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:


• <tagname style="property:value;">

Background and Text Color

<body style="background-color:powderblue;">
<h1 style="color:blue;>This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
HTML Colors
HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values.
HTML supports 140 standard color names. https://www.w3schools.com/colors/colors_names.asp

Color Values

Color Name RGB RGBA HSL HSLA Hex


Red rgb(255, 0, 0) rgba(255, 0, 0, 1) hsl(0,100%,50%) hsla(0, 100%, 50%, 1) #FF0000
Green rgb(0, 255, 0) rgba(0, 255, 0, 1) hsl(120,100%,50%) hsla(120,100%,50%, 1) #00FF00
Blue rgb(0, 0, 255) rgba(0, 0, 255, 1) hsl(240,100%, 50%) hsla(240,100%,50%,1) #0000FF
White rgb(255,255,255) rgba(255,255,255,1) hsl(0, 0%, 100%) hsla(0, 0%, 100%, 1) #FFFFFF
Black rgb(0, 0, 0) rgba(0, 0, 0, 1) hsl(0, 0%, 0%) hsla(0, 0%, 0%, 1) #000000
Gray rgb(128,128,128) rgba(128, 128, 128, 1) hsl(0, 0%, 50%) hsla(0, 0%, 50%, 1) #808080
RGB Stands for Red, Green and Blue and A stands for Alpha and HSL stands for Hue, Saturation and
Lightness and A stands for Alpha
Use example: <p style=”color: rgba(255,0,0,1);”>I am a color red</p>

I am a color red
HTML Style Attribute
Fonts family, size, style, weight and alignment

<!DOCTYPE html>
<html>
<body>

<h1 style="font-family:verdana; text-align: center;">This is a heading</h1>


<p style="font-family:courier; font-weight: bold; font-size: 22px;">This is a paragraph.</p>
<p style="font-family:courier; font-style: italic; font-size: 22px;">This is another
paragraph.</p>

</body>
</html>
Text Formatting
Formatting elements were designed to display special types of text:

• <b> - Bold text


• <strong> - Important text <!DOCTYPE html>
• <i> - Italic text <html>
<body>
• <em> - Emphasized text
• <mark> - Marked text <p><b> - Bold text </b></p>
• <small> - Smaller text <p><strong> - Important text </strong></p>
• <del> - Deleted text <p><i> - Italic text </i></p>
• <ins> - Inserted text <p><em> - Emphasized text </em></p>
• <sub> - Subscript text <p> - This is a <mark>Marked text </mark></p>
• <sup> - Superscript text <p><small> - Smaller text</small></p>
<p><del> - Deleted text </del></p>
<p><ins> - Inserted text </ins></p>
<p> - This is a <sub>Subscript text </sub></p>
<p> - This is a <sup>Superscript text </sup></p>

</body>
</html>
HTML Quotations and Citations
The HTML <blockquote> element defines a <!DOCTYPE html>
<html>
section that is quoted from another source.
<body>
Browsers usually indent <blockquote> elements.
<p>Here is a quote from WWF's website:</p>
The HTML <q> tag defines a short quotation.
Browsers normally insert quotation marks around <blockquote
the quotation. cite="www.worldwildlife.org/who/index.html"><q>For 60
years, <abbr title="World Wild Life">WWF</abbr> has
worked to help people and nature thrive.</q> As the
The HTML <abbr> tag defines an abbreviation or
world's leading conservation organization, WWF works in
an acronym, like "HTML", "CSS", "Mr.", "Dr.", nearly 100 countries. At every level, we collaborate
"ASAP", "ATM". with people around the world to develop and deliver
Marking abbreviations can give useful innovative solutions that protect communities,
information to browsers, translation systems and wildlife, and the places in which they live.
search-engines. </blockquote>

</body>
</html>
Creating your first HTML file
Before you start coding, you need to set up the file for the correct programming language. This is done by
saving the file with the appropriate file extension for HTML.

1. Open any text editor (e.g., Notepad++, Dreamweaver).


2. Click File > New File to create a new file.
3. Click File > Save As. A window will pop up.
4. Choose the location where you want to save the file.
5. Set the file name to anything you want, but make sure it ends with ".html" (e.g., myfirstpage.html).
6. Click Save. Your file is now ready for HTML coding.
HTML Comments
HTML comments are not displayed in the browser, but they can help
document your HTML source code.

HTML Comment Tag


You can add comments to your HTML source by using the following syntax:

<!-- Write your comments here -->

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.
HTML Comments
Example:

<!DOCTYPE html>
<html>
<body>

<!-- This is a comment -->


<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser --
>

</body>
</html>
HTML Comments
Hide Content
Comments can be used to hide content.
This can be helpful if you hide content temporarily:

Example:

<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph.</p>

<!-- <p>This is another paragraph </p> -->

<p>This is a paragraph too.</p>

</body>
</html>
HTML Links
Links are found in nearly all web pages. Links allow users to click their way from page to page.
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.

Note: A link does not have to be text. A link can be an image or any other HTML element!
HTML Links
HTML Links - Syntax
The HTML <a> tag defines a hyperlink. It has
the following syntax:

<a href="url">link text</a>

The most important attribute of the <a>


element is the href attribute, which indicates
the link's destination.

The link text is the part that will be visible to


the reader.

Clicking on the link text, will send the reader to


the specified URL address.

Example:

<a href="https://www.example.com/">Visit
example.com!</a>
Links – the 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.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window
Link Colors
An HTML link is displayed in a different color depending on whether it has been visited, is
unvisited, or is active.

By default, a link will appear like this (in all browsers):

• An unvisited link is underlined and blue


• A visited link is underlined and purple
• An active link is underlined and red
Link Bookmarks
Bookmarks can be useful if a web page is very long.
To create a bookmark - first create the bookmark, then add a link to it.
When the link is clicked, the page will scroll down or up to the location with the bookmark.

First, use the id attribute to create a bookmark:

<h2 id="C4">Chapter 4</h2>

Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:

Example:
<a href="#C4">Jump to Chapter 4</a>
Absolute URLs vs. Relative
URLs
Absolute URLs
An absolute URL contains the complete address required to locate a resource on the web. It
includes the protocol (http/https), domain name, and the path to the specific file or resource.
Components of an Absolute URL:
• Protocol: http:// or https://
• Domain name: The main address of the website (e.g., www.example.com).
• Path: The file or resource path (e.g., /images/picture.jpg).

Relative URLs
A relative URL provides a shorthand link to a resource that is located relative to the current
document or directory. It does not include the domain name or protocol, just the path to the
resource from the current location.
HTML Tables
A table in HTML consists of table cells inside rows and columns.

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

Table Cells
Each table cell is defined by a <td> and a </td> tag, td stands for table data.

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
HTML Tables
<table style="width:100%;" border="1">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
To avoid having double borders like in the example above, set the
<td>Alfreds Futterkiste</td>
CSS border-collapse property to collapse.
<td>Maria Anders</td>
<td>Germany</td> <table style="width:100%; border-collapse: collapse;" border="1">
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
HTML Tables: Colspan and
Rowspan
HTML Table - Colspan
To make a cell span over multiple columns, use the colspan attribute:

<table style="width:100%">
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>
HTML Tables: Colspan and
Rowspan
HTML Table - Colspan
To make a cell span over multiple rows, use the rowspan attribute:

<table style="width:100%">
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>
HTML Tables: Colgroup
The <colgroup> element is used to style specific columns of a table.

The <colgroup> element should be used as a container for the column specifications.

Each group is specified with a <col> element.

The span attribute specifies how many columns that get the style.

The style attribute specifies the style to give the columns.


HTML Lists
HTML lists allow developers to group a set of related items in lists.
Unordered HTML List
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:

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Unordered HTML List - Choose List
Item Marker
The CSS list-style-type property is used to define the style of the list item marker. It can
have one of the following values:
Unordered HTML List - Choose List
Item Marker
Unodered List with different list-style-type examples:

<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML List
Ordered HTML List
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:

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Ordered HTML List - The Type
Attribute
The type attribute of the <ol> tag, defines the type of the list item marker:
Ordered HTML List - The Type
Attribute
Ordered List example with different types:

<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML Description Lists
A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd>
tag describes each term:

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML Images
The HTML <img> tag is used to embed an image in a web page.
The <img> tag has two required attributes:
• src - Specifies the path to the image
• alt - Specifies an alternate text for the image

<img src="url" alt="alternatetext" width="length" height="length">


HTML Image Maps
With HTML image maps, you can create clickable areas on an image.

Image Maps
The HTML <map> tag defines an image map. An image map is an image with
clickable areas. The areas are defined with one or more <area> tags.

How Does it Work?


The idea behind an image map is that you should be able to perform different
actions depending on where in the image you click.

To create an image map you need an image, and some HTML code that describes the
clickable areas.
HTML Image Maps
The Image
The image is inserted using the <img> tag. The only difference from
other images is that you must add a usemap attribute:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">


HTML Image Maps
Create Image Map
Then, add a <map> element.

The <map> element is used to create an image map, and is linked to the
image by using the required name attribute:

<map name="workmap">

The name attribute must have the same value as the <img>'s usemap attribute.
HTML Image Maps
The Areas
Then, add the clickable areas.

A clickable area is defined using an <area> element.

Shape
You must define the shape of the clickable area, and you can choose one of
these values:

• rect - defines a rectangular region


• circle - defines a circular region
• poly - defines a polygonal region
• default - defines the entire region
• You must also define some coordinates to be able to place the clickable area
onto the image.
HTML Image Maps
Shape="rect"
The coordinates for shape="rect" come in pairs, one for the x-axis and
one for the y-axis.

So, the coordinates 34,44 is located 34 pixels from the left margin
and 44 pixels from the top:
HTML Image Maps
Shape="rect"
The coordinates for shape="rect" come in pairs, one for the x-axis and one for the y-axis.
So, the coordinates 34,44 is located 34 pixels from the left margin and 44 pixels from the
top:
The coordinates 270,350 is located 270 pixels from the left margin and 350 pixels from the
top:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">


<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
</map>
HTML Image Maps
Shape="circle"
To add a circle area, first locate the coordinates of the
center of the circle:
337,300

Then specify the radius of the circle:


44 pixels

Shape="poly"
The shape="poly" contains several coordinate points, which
creates a shape formed with straight lines (a polygon).

This can be used to create any shape.


HTML Image Maps
The HTML <picture> Element
The HTML <picture> element gives web developers more flexibility in
specifying image resources.

The <picture> element contains one or more <source> elements, each


referring to different images through the srcset attribute. This way the
browser can choose the image that best fits the current view and/or
device.

Each <source> element has a media attribute that defines when the image is
the most suitable.

<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg" style="width:auto;">
</picture>
HTML Multimedia
HTML Media
Multimedia comes in many different formats. It can be almost anything you can hear or
see, like images, music, sound, videos, records, films, animations, and more.

Web pages often contain multimedia elements of different types and formats.

Multimedia Formats
Multimedia elements (like audio or video) are stored in media files.

The most common way to discover the type of a file, is to look at the file extension.
Multimedia files have formats and different extensions
like: .wav, .mp3, .mp4, .mpg, .wmv, and .avi.
HTML Multimedia
Common Video Formats:
HTML Multimedia
Common Audio Formats:
HTML Video
The HTML <video> Element
To show a video in HTML, use the <video> element:

<video width="320" height="240" controls autoplay>


<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

How it Works
The controls attribute adds video controls, like play, pause, and volume.

It is a good idea to always include width and height attributes. If height and width are not set, the page
might flicker while the video loads.

The <source> element allows you to specify alternative video files which the browser may choose from. The
browser will use the first recognized format.

The text between the <video> and </video> tags will only be displayed in browsers that do not support the
<video> element.
HTML Audio
To play an audio file in HTML, use the <audio> element:

<audio controls autoplay muted>


<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

How it Works
The controls attribute adds audio controls, like play, pause, and volume.

The <source> element allows you to specify alternative audio files which the browser may
choose from. The browser will use the first recognized format.

The text between the <audio> and </audio> tags will only be displayed in browsers that do
not support the <audio> element.

You might also like