Scribd
Upload
111 views58 pages

HTML and Web Design

Uploaded by

Sodnal M. Odelo
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
111 views58 pages

HTML and Web Design

Uploaded by

Sodnal M. Odelo
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 58

HTML AND

WEB DESIGN
BASIC HTML
Introduction to HTML

• What is HTML?

It is the abbreviation of Hypertext Mark -up


Language

HTML tells your browser that you had a


HTML coded file and how it would look like in
the browser that you are using.
TAGS
These are the building blocks of HTML. It
controls the layout and format of the HTML.
Each tag has different task.
For example:
<B>The Text is Bold<B>
Empty Tags – are tags that do not require
closing tags. (Example: <br> - moves to the new
line.)
Container Tags – require an opening tags to
designate the opening of the tag and a closing tag
to denote the end. (Example: <i>displays text in
italic</i>)
PARTS OF HTML TAG
<font face = “Times New Roman”> Hello!!! </font>

Opening Attribute Text/Element Closing


Tag Content Tag

• In typing the HTML tags, make sure the it


starts with <html> and end with </html>. In
this way, the browser would know that this is
an html file.
HTML ELEMENTS

HTML documents are composed of 3 important


container tags: HTML, HEAD, and BODY tags.

<html>
<head>
</head>

<body>
</body>

</html>
How to Create a HTML Document?

1. Click the Start Button.


How to Create a HTML Document?

2. Point to Programs.
How to Create a HTML Document?

3. Click Accessories
How to Create a HTML Document?

4. After clicking
Accessories
then click
NOTEPAD
Start Typing the code…
Saving HTML Document

1. Click File
Saving HTML Document

2. Click Save
Saving HTML Document
3. After clicking Save
As, Locate
DOCUMENTS
Saving HTML Document
3. After clicking Save
As, Locate
DOCUMENTS
Saving HTML Document
4. Click Save Button
Heading Tag
Headings are container tags which format text to
emphasize its content using default value for
size and color.
Attributes Definition Possible Values
1. Align Specifies the Left, right, center,
alignment of the text justify
inside the heading
2. Title Is a text that appears Any text
when the mouse
pointer passes over
the heading
Heading Tag
Example.

<html>
<head><title>The Heading Tag</title>
</head>
<body>
<h1 align = “center” title = “This is heading 1”>Heading 1 </h1>
<h2 align = “left”> Heading 2 </h2>
<h3 align = “right”> Heading 3 </h3>
<h4 align = “center” style = color:" blue”>Heading 4 </h4>
<h5 align = “left”> Heading 5 </h5>
<h6 align = “right”> Heading 6 </h6>
</body>
</html>
Paragraph
Paragraphs are defined with the <p> tag.

Attributes Definition Possible Values


1. Align Specifies the Left, right, center,
alignment of the text justify
inside the heading
2. Title Is a text that appears Any text
when the mouse
pointer passes over
the heading
Paragraph
Example.

<html>
<head><title>Paragraph</title>
</head>
<body>
<h1 align = “center”>Desiderata </h1>

<p>Go Placidly amid the noise and the haste, and remember
what peace there may be in silence. As far as possible,
without surrender, be on good terms in all persons. Speak your truth
quietly and clearly, and listen to others, even to the dull and
ignorant; they too have their story. </p>

</body>
</html>
Line Break
The <br> tag is used when you want to force a
line break (new line).
<html>
<head><title>Paragraph</title>
</head>
<body>
<h1 align = “center”>Desiderata </h1>

<p>Go Placidly amid the noise and the haste, and remember <br>
what peace there may be in silence. As far as possible, without <br>
surrender, be on good terms in all persons. Speak your truth <br>
quietly and clearly, and listen to others, even to the dull and <br>
ignorant; they too have their story. </p>

</body>
</html>
Comment
It tells the user on what the code is all about.

<html>
<head><title>Paragraph</title>
<!—comments may be put anywhere to explain the code. -->
</head>
<body>
<h1 align = “center”>Desiderata </h1>

<p>Go Placidly amid the noise and the haste, and remember <br>
what peace there may be in silence. As far as possible, without <br>
surrender, be on good terms in all persons. Speak your truth <br>
quietly and clearly, and listen to others, even to the dull and <br>
ignorant; they too have their story. </p>

</body>
</html>
Horizontal Rule
It places a horizontal line that spans the width of
the browser.
<html>
<head><title>Paragraph</title>
</head>
<body>
<h1 align = “center”>Desiderata </h1>
<hr width = “75”; size = “2”; align = “center”>
<p>Go Placidly amid the noise and the haste, and remember
what peace there may be in silence. As far as possible, without
surrender, be on good terms in all persons. Speak your truth
quietly and clearly, and listen to others, even to the dull and
ignorant; they too have their story. </p>

</body>
</html>
HTML Text Formatting
Text Formatting Tags:
Font BDO
Bold Italic
Underline Strikeout
Superscript Subscript
Emphasize Big
Small Strong
Example:
This contains <font face =“Times New Roman”
color = “blue”>set font</font>
Output:
This contains set font
HTML Text Formatting
Text Formatting Tags:
Font BDO
Bold Italic
Underline Strikeout
Superscript Subscript
Emphasize Big
Small Strong
Nested Tags:
<i><b>This contains <font face =“Times New
Roman” color = “blue”>set font</font></b></i>
Output:
This contains set font
HTML Character Entities/Elements
Character Entity has three parts:
1. ampersand (&)
2. entity name or number
3. semicolon ( ; )

Example:
1. Create a copyright logo : &copy;
2. Create a inverted exclamatory: &iexcl;
HTML Links
Hyperlinks are essential components of Web
Pages because it a way of inter-accessing the
related web pages and websites.
Anchor Tag
In designing HTML, references can be made to the
same page or into another depending what attributes
the anchor tag has.
Syntax:
<a href=“value” target=“value”>Text to be
Displayed as the Link </a>
Example:
<a href = “yahoo.com”>Open yahoo.com</a>
Output: Open yahoo.com
HTML Frames
Frames are used to display multiple HTML
documents in single browser window. It allows
the user to divide a window into several
rectangular areas where separate documents
are displayed in each rectangle.

MY FIRST WEB PAGE


Menu
Yahoo.com
Google.com
Friendster.com main frame
Abs-cbn.gov.ph
HTML Frames
Example.
<html>
<head><title>Sample Framing</title>
</head>
<frameset rows = “20%, *”>
<frame src = “frame1.html”>
<frameset cols = “25%, *”>
<frame src = “frame2.html”>
<frame src = “frame3.html”>
</frameset>
</frameset>
</html>
HTML Tables
Tables allow authors to arrange data elements
such as text and images into columns and
rows.

The Fruit Table


FRUIT PRICE QUANTITY
Apples 15.00 50

Oranges 8.00 25.00


HTML Tables
Example.
<html>
<head><title>Sample Table</title>
</head>
<body>
<table align =“center” border =“1” bordercolor =“000000”
cellpadding =“3px” cellspacing =“0”>
<caption>The Fruit Table</caption>
<tr bgcolor =“#999999”>
<td width = “100px”>Fruit</td>
<td width = “50px”>Price</td>
<td width = “50px”>Quantity</td> </tr>
<tr> <td>Apples</td>
<td align = “right”>15.00</td>
<td align = “right”>50</td> </tr>
<tr> <td>Oranges</td>
<td align = “right”>8.00</td>
<td align = “right”>&nbsp</td> </tr> </table>
</html>
HTML Lists
Type of Lists
1. Unordered List – is used for listing objects when
you are not concerned with the order of the item
listed. We all it bulleted list.

2. Ordered List – is also called numbered list. This


is very useful especially in specifying items
which follow certain order such as an outline for
a report.

3. Definition List – is a list of terms and their


definitions.
HTML Lists
Example of Unordered and Ordered Lists
<html>
<head><title>Lists</title>
</head>
<body>
A Multiple Level List <br />

<ol type ="I">


<li>List Item 1. Level 1</li>
<ul type = "i">
<li>List Item 1. Level 2</li>
<li>List Item 2. Level 2</li>
<li>List Item 3. Level 2</li>
</ul>
HTML Lists
<li>List Item 2. Level 1</li>
<ol type = "1">
<li>List Item 1. Level 2</li>
<ul>
<li>List Item 1. Level 3</li>
<li>List Item 2. Level 3</li>
<li>List Item 3. Level 3</li> </ul>
<li>List Item 2. Level 2</li>
<ul>
<li>List Item 1. Level 3</li>
<li>List Item 2. Level 3</li>
<li>List Item 3. Level 3</li> </ul>
<li>List Item 3. Level 2</li>
<ul>
<li>List Item 1. Level 3</li>
<li>List Item 2. Level 3</li>
<li>List Item 3. Level 3</li> </ul>
</ol>
<li>List Item 3. Level 1</li> </ol>
</body>
</html>
HTML Lists
Example of Definition List
<html>
<head><title>Lists</title>
</head>
<body>
<dl></b>Definition of Terms</b><br><br>
<dt> Term 1
<dd>Definition of Term 1
<dt> Term 2
<dd>Definition of Term 2
<dt> Term 3
<dd>Definition of Term 3
</dl>
</body>
</html>
HTML Forms
A form block is define by the <form> tag and is
closed by the </form>.
Commonly used forms are check boxes, text field,
text areas, radio buttons, and dropdown boxes.

<html>
<head><title>Forms</title>
</head>
<body>
<form action ="submit.html" method = "post">
Username : <input type = "text" name = "user">
<br><br>
Password : <input type = "password" name = "pwd">
<br>
<input type ="submit" value ="submit">
</form>
</body>
</html>
HTML Images
HTML document can be enhanced with the use of
images.
Example:
<html>
<head><title>Images</title>
</head>
<body>
<img src = “filename.ext” alt = “Earth”>
</body>
</html>
HTML Multi-Media
Example of multimedia are videos, gif, .swf file, &
animated text.
Example:
<html>
<head><title>Images</title>
</head>
<body>
<embed src = “filename.ext” autoplay = “false”>
</body>
</html>
HTML Background
Background can be a background color or a
background image.
Example:

<html>
<head><title>Images</title>
</head>
<body bgcolor = “blue” or background = “image.jpeg”>
<img src = “image2.jpeg” alt = “Earth”>
</body>
</html>
ADVANCE HTML
HTML Layout
Example Output:
HTML Layout
Example Code:
<html>
<head><title>Images</title>
</head>
<body>
<table border ="0" width ="550" cellpadding ="10" align ="center">
<tr>
<td width ="50% valign ="top">
This is some text in two columns. <br />This is some text in two columns.<br />
This is some text in two columns. <br />This is some text in two columns.<br />
This is some text in two columns. <br />This is some text in two columns.<br />
This is some text in two columns. <br />This is some text in two columns.<br />
This is some text in two columns. </td>
<td width ="50% valign ="top">
This is some text in two columns. <br />This is some text in two columns.<br />
This is some text in two columns. <br />This is some text in two columns.<br />
This is some text in two columns. <br />This is some text in two columns.<br />
This is some text in two columns. <br />This is some text in two columns.<br />
This is some text in two columns. </td>
</tr>
</table>
</body>
</html>
HTML Fonts
<font> tag defines the portion in which we will set
the font styles. </font> is the tag that closes the
formatting.
Example:
<html>
<head><title>Images</title>
</head>
<body>
<p>This is the default font style.</p>
<p><font face = “Arial”>This is the default font style.</font></p>
<p><font size =“1”>This is font size 1.</font></p>
<p><font size =“2”>This is font size 2.</font></p>
</body>
</html>
Cascading Style Sheets (CSS)
1. In line styles – styles that are placed inside HTML tags.
These are primarily used to format elements which are
not part of the general formatting rule. It overrides as it
will defeat the very purpose of CSS.
2. Internal Style Sheets – used for making document-wide
style rules. They are placed in the header of the
document. Internal style sheets are defined by the
<style> tag.
3. External Style Sheet – These are sheets that you need
to used if you want to make a central formatting control
on multiple web pages. This method uses the <link>
tag to link the page to the external style sheet. With
external CSS, it is possible to format the entire web
site by just modifying a single file.
Cascading Style Sheets (CSS)
Example of In-line styles:

<html>
<head><title>Images</title>
</head>
<body>
<p style =“font-family:Arial; color:red; font-size:20px”>
This is a sample style applied to a paragraph tag. </p>
</body>
</html>
Cascading Style Sheets (CSS)
Example of Internal styles:

<html>
<head><title>Images</title>
<style type = “text/css”>
p{
font-family:Arial;
color:red;
font-size:12px;
}
</style>
</head>
<body>
<p>
This is a sample style applied to a paragraph tag. </p>
</body>
</html>
Cascading Style Sheets (CSS)
Example of external styles:

(external.css) (HTML File)


p{ <html>
font-family:Arial; <head><title>Images</title>
color:red; <link href =”external.css” rel=“strylesheet” type=“text/css”>
font-size:12px; </head>
} <body>
<p>
This is a sample external style applied to a
paragraph tag.
</p>
</body>
</html>
Cascading Style Sheets (CSS)
Advantages of CSS
CSS makes the creation of documents more
efficient because you only need to define things
once. This means that:

• Pages download faster, there are claims that you save around
50% of download time using CSS.

• Fewer lines of code and your code becomes cleaner and more
readable.

• The look is kept consistent throughout the whole website

• Updates are made easier and errors that arise from formatting
several elements are minimized.
CSS Border Properties
1. border-style – specifies the border style.
2. Border-color – sets the color of the border.
3. Border-width – specifies the thickness of the
border.
Example:
<html>
<head><title>Border</title>
<style type =“text/css”>
p { margin:50px, 50px, 50px, 50px;
border-style:double; border-color:blue;
color:red;
background-color:yellow; }
</style>
</head>
<body>
<p>This is a sample html for border.</p>
</body>
</html>
CSS Image Background
Example:
<html>
<head><title>Border</title>
<style type =“text/css”>
p { background-image:url(pic.jpeg);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<p>This is a sample html for border.</p>
</body>
</html>
CSS Pseudo-Classes Properties
Pseudo-classes are special group of selectors that
allow the user to apply styling rules to an element
when it is on a particular state of condition such as
on mouse over.
Example:
<html>
<head><title>Link Using Pseudo-classes</title>
<style type =“text/css”>
a { font-family:Verdana;
border: thin solid #000000; }
a:link { color:#000099;
background:#999933; }
a:visited { color:#990000;
background:#999933; }
a:hover { color:#999933;
background:#000099; }
CSS Pseudo-Classes Properties
Cont…
a:active { color:#FF0000;
background:#000099; }
</style>
</head>
<body>
<a href = “link1.html”>Link 1</a><br />
<a href = “link2.html”>Link 2</a><br />
<a href = “link3.html”>Link 3</a><br />
<a href = “link4.html”>Link 4</a>
</body>
</html>
HTML Marquee Behavior
Example:
<html>
<head><title>Marquee Behavior</title>
</head>
<body>
<p><marquee direction ="alternate“>
Welcome to my first web page… </p>
</body>
</html>
HTML FORMS
Example:
<html>
<head><title>HTML FORMS</title>
</head>
<body>
<form action=“submit.php” method=“post”>
Username: <input type=“text” name=“user”>
<br><br>
Password:<input type=“password” name=“pwd”>
<br>
<input type=“submit” values=“Submit”
</form>
</body>
</html>
HTML FORMS
Example:
<html>
<head><title>HTML FORMS: checkbox</title>
</head>
<body>
<form action=“submit.php” method=“post”>
My hobbies <input type=“checkbox” name=“move”>
watching movies <input type=“checkbox” name=“movie”>
reading books
<input type=“submit” values=“Submit”
</form>
</body>
</html>
HTML FORMS
Example:
<html>
<head><title>HTML FORMS: select</title>
</head>
<body>
<form action=“submit.php” method=“post”>
<select name=“location”>
<option values=“philippines”> Philippines</option>
<option values=“singapore”> Singapore</option>
<option values=“thailand”>Thailand</option>
<option values=“china”>China</option>
</select
<input type=“submit” values=“Submit”>

</form>
</body>
</html>
HTML FORMS
Example:
<html>
<head><title>HTML FORMS: comments</title>
</head>
<body>
<form action=“submit.php” method=“post”>
<textarea name=“contents” row=“5” cols=“20” wrap= “soft>
Enter your Comment Here</textarea>
<input type=“submit” values=“Submit”>
<input type=“reset” values=“clear”>
</form>
</body>
</html>
Templates Challenge Create a Template

Html codes

<html>
<head>
<title>table</title>
</head>
<body>
<table border width="590">
<tr><td colspan=4 align=center
height=50>page banner</td></tr>

<tr><td rowspan=2> nav links</td>


<td colspan=2 height=200>feature</td>

<td rowspan=2>link ads</td></tr>


<tr><td>r3c2</td><td>r3c3</td></tr>
</table>

</body>
</html>

You might also like