Scribd
Upload
172 views

Prepared By: Jerian R. Peren

The document provides information on HTML elements and tags: 1. It defines HTML as a markup language used to describe web pages using tags like <html> and </html>. 2. It explains common HTML elements and tags for headings, paragraphs, fonts, lists, images, and hyperlinks. 3. It provides examples of how to apply physical styles to text, insert images and videos, and set document margins and lists.

Uploaded by

Mj Reyes
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
172 views

Prepared By: Jerian R. Peren

The document provides information on HTML elements and tags: 1. It defines HTML as a markup language used to describe web pages using tags like <html> and </html>. 2. It explains common HTML elements and tags for headings, paragraphs, fonts, lists, images, and hyperlinks. 3. It provides examples of how to apply physical styles to text, insert images and videos, and set document margins and lists.

Uploaded by

Mj Reyes
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 48

prepared by: Jerian R.

Peren

Question

Why do we need to learn HTML?

Outline
HTML Element Syntax Defining paragraph Applying fonts Applying physical styles on text Inserting images

What is HTML?
HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of markup tags HTML uses markup tags to describe web pages

HTML Tags
HTML markup tags are usually called HTML tags HTML tags are keywords surrounded by angle brackets like <html> HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag Start and end tags are also called opening tags and closing tags.

Web Tools
Notepad uses basic text formatting in order to make and edit text files

Examples of browsers are the Internet explorer , netscape navigator and mozilla firefox, user usually type the address referred to us as the URL

HTML Element Syntax

The main elements of HTML documents are the following; html, head, title and body.

Summary HTML element starts with a start tag / opening tag HTML element ends with an end tag / closing tag The element content is everything between the start and the end tag Some HTML elements have empty content Empty elements are closed in the start tag Most HTML elements can have attributes

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

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

Example <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>

HTML paragraphs are defined with the <p> tag.

Example <p>This is a paragraph</p> <p>This is another paragraph</p>

Note: align attribute can be set to left, right, center or justified.

The font tag determines which font is applied to your text.

Example
</p> <font face= Arial, Helvetica, sans-serif> HTML only recognizes single spaces between characters. Other than a single tap on a space bar, HTML has little regard for how you type things. What it does have regard for its tags. </font> </p>
color and size attribute can be apply in font tag

To create bold text To italicize text To underline text To strike through text To produce a monospace code To make superscript and subscript

<b> bold </b> <i> italic </i> <u> underline </u> <s> strikethrough </s> <tt> Teletype </tt> <sup> Superscript </sup> <sub> Subscript </sub>

Note: The font tag determines which font is applied to your text.

Working with Images

To specify the image you want displayed, add a src attribute setting it equal to the image on the server Example

<img src=ghie.jpg >


To specify the images dimension, include width and height attribute to set them equal to pixel dimension of the image.

<img src=ghie.jpg width=200 height=100>

To place border around an image include a border attribute, setting it equal to borders thickness in pixels: Example

<img src=ghie.jpg width=200 height=100 alt=Jerians Picture border=5 />

<html> <body>

<p>Note that bottom alignment is the default alignment</p> <p> An image <img src ="hackanm.gif" width="48" height="48"> in the text </p> <p> <img src ="hackanm.gif" width="48" height="48"> An image before the text </p> <p> An image after the text <img src ="hackanm.gif" width="48" height="48"> </p> </body> </html>

<p> An image <img src="hackanm.gif" align="bottom" width="48" height="48"> in the text </p> <p> An image <img src ="hackanm.gif" align="middle" width="48" height="48"> in the text </p>
<p> An image <img src ="hackanm.gif" align="top" width="48" height="48"> in the text </p>

Controlling image Alignment and spacing


To increase the amount of white space around tan image, add the hspace and vspace attributes and set them equal to a pixel value. Example <img align=left src=image/daisy_calvin.jpg width=50 height=50 alt=My pets, daisy and calvin hspace=25 vspace=25 />

<html> <body background="background.jpg"> <h3>Look: A background image!</h3> <p>Both gif and jpg files can be used as HTML backgrounds.</p> <p>If the image is smaller than the page, the image will repeat itself.</p> </body> </html>

Embedding Audio Files

In the body document, enter an ,<embed> tag. Define src attribute and set it equal to the location of the sound.

Example <embed src=backbeat.mid >

Define width and height attribute and set it equal to the location of the sound

Example

<embed src=backbeat.mid width=100 height=15 autostart=false >

To float the control panel amongst text, similarly to an image, define the align attribute;

left floats the control panel to the left margin and wraps text around it to the right. right floats the control panel to the right margin and wraps text around it to the left.

1. 2. 3. 4. 5.

In the body of the document enter an <embed> tag. Define a src attribute and set it equal to the pathname of the sound file Define width and height attributes setting them equal to 1. Set the auto start attribute equal to true so the sound begins once the page has successfully loaded. Define loop attribute, setting it equal to the number of times you want the sound file to be play.

Sample <html> <head> <title>Background </title> </head> <body> <embed src=brandmarch.mid width=1 height=1 autostart=true loop=-1 > </body> </html>

Embedding Video
In the body of your document, enter an <embed> tag where you want the video file to be displayed. Define src attribute to specify the location of the source file of the web browser. Define width and height attributes to specify the displayed videos dimension. Define an autoplay attribute and set it equal to true to make the video play as soon as the page loads. Define a controller attribute, setting it equal to true to display a control panel. A setting of false hides the control panel

Example

<html> <head> <title>Embedding video <title> <head> <body> <embed src=laurie.mov width=177 height=144 autoplay=false controller=true> </body> </html>

Define a loop attribute as follows: true makes the clip play continuously false makes the clip play only once palindrome makes the clip play normally and then play backwards, looping continuously

Setting Document Margins Creating an unordered list Definition List

Setting Document Margins


<html> <head> <title> Non Standard margin Attribute</title> </head> <body leftmargin=100 topmargin=50 marginwidth=100 marginheight=50> <h1> Honest Shampoo instructions </h1> <font face= Verdana, Arial, Helvetica. <ol> <li> Apply to wet hair </li. <li> Massage gently into hair and scalp </li> <li> Rinse thoroughly </li> <li> Repeat steps 1-3 to ensure you burn through a bottle of this stuff a week. </li. </ol> </font> </body> </html>

Setting Document Margins


NOTE 1. The value you specify for leftmargin and marginwidth set the width for both your left and right margins. Your topmargin and marginheigth values set the width of both the top and bottom margins.

2.

3. Set the attribute equal to numeric value (representing pixel)

Creating an Unordered list. What word processing calls a bulleted list, HTML to as an unordered list. You create these using the <ul> tag and the same <li> tag that ordered list <html> use.
<body> <h4>An Unordered List:</h4> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html>

Modifying Bullets Style


1. To create square bullets, set the type attribute equal to square <ul type=square> 2. To create circular bullets, set the type attribute equal to circle: <ul type=circle> 3. To create disc bullets, set the type attribute equal to dic <ul type=disc>

Nesting List
Nesting simply means to place elements inside the other elements. When you nest list, you insert a new ordered or unordered list between list item in an existing list. The existing list is called the parent list and the second nested list is called the child list.

Example of Nesting List


<html> <body> <h4>A nested List:</h4> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul> </body> </html>

A nested List: Coffee Tea

o Black tea o Green tea


Milk

Definition Lists
A definition list is not a list of items. This is a list of terms and explanation of the terms. A definition list starts with the <dl> tag. Each definition-list term starts with the <dt> tag. Each definition-list definition starts with the <dd> tag.
Example <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> Here is how it looks in a browser: Coffee Black hot drink Milk White cold drink

Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks, images, links, other lists, etc.

Hyperlink

What is Hyperlink?
A

hyperlink

is a word, phrase, or image that

you can click on to jump to a new document or a new section within the current document. Hyperlinks are found in nearly all Web pages, allowing users to click their way from page to page.

Hyperlink
The anchor tag

<a> </a> Anchor tags href attribute that transform the <a> tag into link (stands for hypertext reference) To control the color of the text links, define the three attributes within the body tags
link vlink alink specifies the color of the links that havent been visited. specifies the color of the links that have been visited. specifies the color of the links that are currently active

The Target Attribute


With the target attribute, you can define where the linked document will be opened. The line below will open the document in a new browser window: <a href="http://www.google.com/"target="_blank">Visit Google!</a>

Hyperlink To format a link so that the document it points to open in a new browser window, define a target attribute and set it equal to _blank:
Example < a href=bingo.html target=_blank > text link < /a>

Creating mailto links


Define an href attribute and set it equal to the mailto:protocol, including the e-mail address the message should go as shown below: Example < a href=mailto:[email protected] < /a>

The Anchor Tag and the Name Attribute


The name attribute is used to create a named anchor. When using named anchors we can create links that can jump directly into a specific section on a page, instead of letting the user scroll around to find what he/she is looking for. Below is the syntax of a named anchor: <a name="label">Text to be displayed</a>

Summary: Links Galore

EXTERNAL LINK <a href="http://www.gov.ph">Republic of the Philippines</a>

INTERNAL LINK <a href="project.html">this links to my project</a>

techFactors, Inc.

link target: new window

<a href="pony.gif" target="new">In another window my pony is. See it you must.</a>

techFactors, Inc.

linking to other parts of the same page


<a href="#bottom">More on the Yanomami Indians of the Amazon</a></p>

This text is a link

to this paragraph.
<p><a name="bottom" id="bottom"> Yanomami Indians of the Amazon</a></p> <p>There are several ways to refer to the Yanomami Indians of the Amazon Rainforest. Many people refer to them as the Yanomami while others refer to them as Yanomama or Yanomano. Either way, someone chooses to say their name, the word still means wild, uncivilized people of the Amazon.</p> techFactors, Inc.

Thank you for listening

You might also like