Scribd
Upload
5 views

HTML (1)

HTML, or Hyper Text Markup Language, is the standard markup language for creating web pages, consisting of elements that structure content. HTML documents start with a document type declaration and include elements such as headings, paragraphs, and links, which can be styled using CSS properties. Key features include the use of the <a> tag for hyperlinks, the <img> tag for images, and various formatting elements to enhance text presentation.

Uploaded by

riambonanzaelmar
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

HTML (1)

HTML, or Hyper Text Markup Language, is the standard markup language for creating web pages, consisting of elements that structure content. HTML documents start with a document type declaration and include elements such as headings, paragraphs, and links, which can be styled using CSS properties. Key features include the use of the <a> tag for hyperlinks, the <img> tag for images, and various formatting elements to enhance text presentation.

Uploaded by

riambonanzaelmar
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 15

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.

HTML is the standard markup language for creating Web pages.

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

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

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

HTML Elements

The HTML element is everything from the start tag to the end tag:
<tagname>Content goes here...</tagname>

Examples of some HTML elements:

<h1>My First Heading</h1>


<p>My first paragraph.</p>

Inside the <html> element there is a <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>
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>.
HTML Headings

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


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

Example :
<!DOCTYPE html>

<html>

<body>

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

</body>

</html>

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.
Bigger Headings
Each HTML heading has a default size. However, you can specify the size for any heading with the style attribute, using
the CSS font-size property:

Example:
<!DOCTYPE html>

<html>

<body>

<h1 style="font-size:70px;">Heading 1</h1>

<p>You can change the size of a heading with the style attribute, using the font-
size property.</p>

</body>

</html>
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:

Example:

<!DOCTYPE html>

<html>

<body>

<p>

This paragraph

contains a lot of lines

in the source code,

but the browser

ignores it.

</p>

<p>

This paragraph

contains a lot of spaces

in the source code,

but the browser

ignores it.

</p>

<p>

The number of lines in a paragraph depends on the size of the browser


window. If you resize the browser window, the number of lines in this
paragraph will change.

</p>

</body>

</html>
The Poem Problem

Example :

<!DOCTYPE html>

<html>

<body>

<p>

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</p>

<pre>

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</pre>

</body>

</html>

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:
HTML Styles

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

Example:
<!DOCTYPE html>

<html>

<body>

<p>I am normal</p>

<p style="color:red;">I am red</p>

<p style="color:blue;">I am blue</p>

<p style="font-size:50px;">I am big</p>

</body>

</html>

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 Color

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

Example:

<!DOCTYPE html> <!DOCTYPE html>

<html> <html>

<body style="background-color:powderblue;"> <body>

<h1 style="background-color:powderblue;">This is a
heading</h1>
<h1> This is a heading </h1>
<p style="background-color:tomato;">This is a
<p> This is a paragraph. </p>
paragraph.</p>

</body>
</body>
</html>
</html>
Text Color

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

Example:

<!DOCTYPE html>

<html>

<body>

<h1 style="color:blue;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>

</body>

</html>

Fonts

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

Example:

<!DOCTYPE html>

<html>

<body>

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

<p style="font-family:courier;">This is a paragraph.</p>

</body>

</html>

Text Size

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

Example:

<!DOCTYPE html>

<html>

<body>

<h1 style="font-size:300%;">This is a heading</h1>

<p style="font-size:160%;">This is a paragraph.</p>

</body>

</html>
Text Alignment

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

Example:
<!DOCTYPE html>

<html>

<body>

<h1 style="text-align:center;">Centered Heading</h1>

<p style="text-align:center;">Centered paragraph.</p>

</body>

</html>

Summary

 Use the style attribute for styling HTML elements

 Use background-color for background color

 Use color for text colors

 Use font-family for text fonts

 Use font-size for text sizes

 Use text-align for text alignment

HTML Formatting Elements

Formatting elements were designed to display special types of text:


 <b> - Bold text
 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text

HTML <b> and <strong> Elements


The HTML <b> element defines bold text, without any extra importance.
The HTML <strong> element defines text with strong importance. The content inside is typically displayed in bold.
HTML <i> and <em> Elements
The HTML <i> element defines a part of text in an alternate voice or mood. The content inside is typically displayed in
italic.
Tip: The <i> tag is often used to indicate a technical term, a phrase from another language, a thought, a ship name, etc.
The HTML <em> element defines emphasized text. The content inside is typically displayed in italic.
Tip: A screen reader will pronounce the words in <em> with an emphasis, using verbal stress.
HTML <small> Element
The HTML <small> element defines smaller text:
HTML <mark> Element
The HTML <mark> element defines text that should be marked or highlighted:
HTML <del> Element
The HTML <del> element defines text that has been deleted from a document. Browsers will usually strike a line through
deleted text:
HTML <ins> Element
The HTML <ins> element defines a text that has been inserted into a document. Browsers will usually underline inserted
text:
HTML <sub> Element
The HTML <sub> element defines subscript text. Subscript text appears half a character below the normal line, and is
sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H 2O:
HTML <sup> Element
The HTML <sup> element defines superscript text. Superscript text appears half a character above the normal line, and
is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW [1]:

Example:

<!DOCTYPE html>

<html>

<body>

<p>This text is normal.</p>

<p><b>This text is bold.</b></p>

<p><strong>This text is important!</strong></p>

<p><i>This text is italic.</i></p>

<p><em>This text is emphasized.</em></p>

<p><small>This is some smaller text.</small></p>

<p>Do not forget to buy <mark>milk</mark> today.</p>

<p>My favorite color is <del>blue</del> red.</p>

<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

<p>This is <sub>subscripted</sub> text.</p>

<p>This is <sup>superscripted</sup> text.</p>

</body>

</html>
HTML Links - Hyperlinks

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. The HTML <a> tag defines a hyperlinks.

It has the following syntax:

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

Example:

<!DOCTYPE html>

<html>

<body>

<h1>HTML Links</h1>

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

</body>

</html>

By default, links will appear as follows in all browsers:

 An unvisited link is underlined and blue

 A visited link is underlined and purple

 An active link is underlined and red

HTML 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


Example:

<!DOCTYPE html>

<html>

<body>

<h2>The target Attribute</h2>

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

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

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

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

</body>

</html>

Absolute URLs vs. Relative URLs

Both examples above 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):

Example:

<!DOCTYPE html>

<html>

<body>

<h2>Absolute URLs</h2>

<p><a href="https://www.w3.org/" target="_blank">W3C</a></p>

<p><a href="https://www.google.com/" target="_blank">Google</a></p>

<h2>Relative URLs</h2>

<p><a href="html_images.asp">HTML Images</a></p>

<p><a href="/css/default.asp">CSS Tutorial</a></p>

</body>

</html>
HTML Links - Use an Image as a Link

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

Example:

<!DOCTYPE html>

<html>

<body>

<h2>Image as a Link</h2>

<p>The image below is a link. Try to click on it.</p>

<a href="default.asp"><img src="smiley.gif" alt="HTML tutorial"


style="width:42px;height:42px;"></a>

</body>

</html>

Link to an 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):

Example:
<!DOCTYPE html>

<html>

<body>

<h2>Link to an Email Address</h2>

<p>To create a link that opens in the user's email program (to let them send a new
email), use mailto: inside the href attribute:</p>

<p><a href="mailto:[email protected]">Send email</a></p>

</body>

</html>
Button as a 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:

Example:
<!DOCTYPE html>

<html>

<body>

<h2>Button as a Links</h2>

<p>Click the button to go to the HTML tutorial.</p>

<button onclick="document.location='default.asp'">HTML Tutorial</button>

</body>

</html>

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.

Example:
<!DOCTYPE html>

<html lang="en-US">

<body>

<h2>Link Titles</h2>

<p>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.</p>

<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML


section">Visit our HTML Tutorial</a>

</body>

</html>

Chapter Summary

 Use the <a> element to define a link

 Use the href attribute to define the link address

 Use the target attribute to define where to open the linked document

 Use the <img> element (inside <a>) to use an image as a link

 Use the mailto: scheme inside the href attribute to create a link that opens the user's email program
HTML IMAGES

<img src="url" alt="alternatetext">

HTML Images Syntax

The HTML <img> tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding
space for the referenced image.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

The <img> tag has two required attributes:

 src - Specifies the path to the image

 alt - Specifies an alternate text for the image

Example Code:

<!DOCTYPE html>

<html>

<body>

<h2>HTML Image</h2>

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

</body>

</html>

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

The 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 Size - Width and Height

You can use the style attribute to specify the width and height of an image. The width and height attributes always
define the width and height of the image in pixels.

Width and Height, or Style?

The width, height, and style attributes are all valid in HTML. However, we suggest using the style attribute. It prevents
styles sheets from changing the size of images
Example Code:

<!DOCTYPE html>

<html>

<head>

<style>

/* This style sets the width of all images to 100%: */

img {

width: 100%;

</style>

</head>

<body>

<h2>Width/Height Attributes or Style?</h2>

<p>The first image uses the width attribute (set to 128 pixels), but the style in
the head section overrides it, and sets the width to 100%.</p>

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

<p>The second image uses the style attribute to set the width to 128 pixels,
this will not be overridden by the style in the head section:</p>

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>

</html>
Common Image Formats

Abbreviation File Format File Extension

APNG Animated Portable Network Graphics .apng

GIF Graphics Interchange Format .gif

ICO Microsoft Icon .ico, .cur

JPEG Joint Photographic Expert Group image .jpg, .jpeg, .jfif, .pjpeg, .pjp

PNG Portable Network Graphics .png

SVG Scalable Vector Graphics .svg

Here are the most common image file types, which are supported in all browsers (Chrome, Edge, Firefox, Safari, Opera):

Chapter Summary

 Use the HTML <img> element to define an image

 Use the HTML src attribute to define the URL of the image

 Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed

 Use the HTML width and height attributes or the CSS width and height properties to define the size of the image

You might also like