Scribd
Upload
77 views

CH 2

Uploaded by

Ephrem Habtamu
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
77 views

CH 2

Uploaded by

Ephrem Habtamu
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 78

Chapter Two

Web Design and Development


Fundamentals

By Tesfahun
N.
Outline
❖ What is HTML
 Basic HTML syntax

 Basic Tags: Hyperlinks, Images, Formatting

 Headings and Paragraphs

 The <head> Section: Title, Meta, Script, Style

 The <body> Section

 Lists: <ol>, <ul> and <dl>

 The <div> and <span> elements

 HTML Tables and HTML Forms


What is web page?
A Web page is a document for the World Wide Web that
is identified by URL.

A Web page can be accessed and displayed on a monitor


or mobile device through a Web browser .

The data found in a Web page is usually in HTML or


XHTML format.

The Web pages usually also contain other resources such


as style sheets, scripts and images
3
What is HTML?
It is short form of "HyperText Markup Language".

 It is a language for describing web-pages using ordinary


text.

HTML is not a complex programming language.

HTML file a plain-text file

A web site will often contain many html files that link to
each other.

4
HTML Tags
HTML tags are the hidden keywords within a web
page that define how your web browser must format
and display the content

Most tags must have two parts,

Eg an opening <html>


a closing part </html>

There are some tags that are an exception to this rule,


and where a closing tag is not required. Eg <img>
5
Creating HTML Pages

An HTML file must have .html file extension

HTML files can be created with text editors:


NotePad,
NotePad ++,
Sublime
Comodo
Visual Studio etc..
6
HTML Code Formatting
The HTML source code should be formatted to

increase readability and facilitate debugging.

Every block element should start on a new line.

Every nested (block) element should be indented.

For performance reasons, formatting can be

sacrificed
7
HTML page structure
 HTML describes structure using two main
sections:
 <head>
 <body>
HTML Structure
HTML is included of “elements” and “tags”
• Begins with <html> and ends with </html>

Elements (tags) are nested one inside another:

<html> <head></head> <body></body> </html>


9
The <!DOCTYPE> Declaration
HTML documents must start with a document type

definition (DTD)

It informs the web browser about the type and version

of HTML

HTML 4.01, XHTML 1.0 XHTML 1.1, HTML 5

it helps the browser to handle and load it properly.

10
HTML Tags
The <html> root element of an HTML page

The <head> contains meta information

The <title> element specifies a title of page

The <body> defines the document's body, and is a


container for all the visible contents
Some Simple Tags
Hyperlink Tags
<a href="https://www.youtube.com/">Link to youtube </a>

Image Tags

<img src="logo.gif"/>

Text formatting tags


This text is <b>bold.</b>
<br/>new line<br />
This one is <I> italic </I>
12
Some Simple Tags – Example
some-tags.html

<body>
<a href="https://www.youtube.com/" title=
“youtube site">This is a link.</a>
<br />
<img src="logo.gif" />
<br />
<b>Bold</b> and <i>italic</i> text.
</body>

13
First HTML Page
test.html
<!DOCTYPE html>
<html>
<head>
<title>well came to WP</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html> 14
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"
Cont..
 Tags have attributes and values :
• Eg , colore , size , height etc….

16
href Attribute
The <a> tag defines a hyperlink.

The href attribute specifies the URL of the page


the link goes to:

• Example
• <a href="https://www.google.com">Visit google</a>
The src 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:

• Example
• <img src="img_girl.jpg">
The alt Attribute
The required alt attribute for the <img> tag
specifies an alternate text for an image, if the
image for some reason cannot be displayed

• Example

• <img src=“logo.jpg" alt=“here it is the logo">


Tags Attributes
 Tag attributes can apply to every element:

Id,

Style,

Class,

Title etc
20
The width and height Attributes

The <img> tag should also contain the width and


height attributes, which specifies the width and
height of the image (in pixels):

• Example
• <img src="img_girl.jpg" width="500" height="600">
The style Attribute
The style attribute is used to add styles to an
element, such as color, font, size, and more.

• Example
• <p style="color:red;">This is a red paragraph.</p>
The lang Attribute
Adding the lang attribute inside the <html> tag, to declare
the language of the Web page.

Lang attribute assist search engines and browsers.

<!DOCTYPE html>

<html lang="en">
<body>
...
</body>

</html>
Headings and Paragraphs

Heading Tags (h1 – h6)

<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>

Paragraph Tags
<p>This is my first paragraph</p>
<p>This is my second paragraph</p>

Sections: div and span


<div style="background: skyblue;">
This is a div</div>
24
Headings and Paragraphs – Example
headings.html
<html>
<head>
<title>Headings and paragraphs</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>
<p>This is my first paragraph</p>
<p>This is my second paragraph</p>
<div style="background:pink">
This is a div</div>
</body>
25
</html>
The <head> Section
Contains information that doesn’t displayed to the page

Begins with <head> and ends with </head>

Contains mandatory single <title> tag

Can contain some other tags, e.g.

<meta>

<script>

<link>

<style>
26
Header
<!DOCTYPE HTML> HTML header
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html> 27
<head> Section: <title> tag
Title should be placed between <head> and </head> tags

<head>
<title>here is the title section </title>
</head>

Used to specify a title in the window title bar

28
<head> Section: <meta>
Meta tags additionally describe the content contained
within the page

<meta name="description" content="HTML tutorial" />

<meta name="keywords" content="html, web design, styles" />

<meta name="author" content="Chris Brewer" />

<meta http-equiv="refresh" content="5;


url=http://www.telerik.com" />

29
<head> Section: <script>
The <script> element is used to embed scripts into an
HTML document
Script are executed in the client's Web browser

Scripts can live in the <head> and in the <body>


sections

Supported client-side scripting languages:

JavaScript (it is not Java!)

VBScript
30
The <script> Tag – Example
The <script> tag is used to embed a client-side script
(JavaScript). scripts-example.html
<!DOCTYPE HTML>
<html>
<head>
<title>JavaScript Example</title>
<script type="text/javascript">
function sayHello() {
document.write("<p>Hello World!<\/p>");
}
</script>
</head>
<body>
<script type= "text/javascript">
sayHello();
</script>
</body>
</html>
31
<head> Section: <style>
The <style> element embeds formatting
information (CSS styles) into an HTML page
style-example.html
<html>
<head>
<style type="text/css">
p { font-size: 12pt; line-height: 12pt; }
p:first-letter { font-size: 200%; }
span { text-transform: uppercase; }
</style>
</head>
<body>
<p>Styles demo.<br />
<span>Test uppercase</span>.
</p>
</body>
</html>

32
<body> Section: Introduction
The <body> section describes the viewable
portion of the page
Starts after the <head> </head> section
Begins with <body> and ends with </body>

<html>
<head><title>Test page</title></head>
<body>
<!-- This is the Web page body -->
</body>
</html>

33
Comments: <!-- --> Tag
Comments can exist anywhere between the <html></html> tags

Comments start with <!-- and end with -->

<!–- Telerik Logo (a JPG file) -->


<img src="logo.jpg" alt=“Telerik Logo">
<!–- Hyperlink to the web site -->
<a href="http://telerik.com/">Telerik</a>
<!–- Show the news table -->
<table class="newstable">
...

34
Text Formatting
 Text formatting tags modify the text between the opening tag and the closing tag
• Ex. <b>Hello</b> makes “Hello” bold

35
Hyperlinks: <a> Tag
Link to a document called form.html on the same server in the
same directory:
<a href="form.html">Fill Our Form</a>
Link to a document called parent.html on the same server in
the parent directory:
<a href="../parent.html">Parent</a>
Link to a document called cat.html on the same server in the
subdirectory stuff:

<a href="stuff/cat.html">Catalog</a>

36
Hyperlinks: <a> Tag (2)
Link to an external Web site:
Always use a full URL, including "http://",
not just www.somesite.com
<a href="http://www.devbg.org"
target="_blank">BASD</a>
Link to an e-mail address:

<a href="mailto:[email protected]?subject=Bug+Report">
Please report bugs here (by e-mail only)</a>
37
Hyperlinks and Sections
Link to another location in the same document:

<a href="#section1">Go to
Introduction</a>
...
<h2 id="section1">Introduction</h2>

Link to a specific location in another document:

<a href="chapter3.html#section3.1.1">Go to Section 3.1.1</a>


<div id="section3.1.1">
<h3>3.1.1. Technical Background</h3>
</div>
38
Links to the Same Document – Example

links-to-same-document.html
<h1>Table of Contents</h1>
<p><a href="#section1">Introduction</a><br />
<a href="#section2">Some background</A><br />
<a href="#section2.1">Project History</a><br />
...the rest of the table of contents...
<!-- The document text follows here -->
<h2 id="section1">Introduction</h2>
... Section 1 follows here ...
<h2 id="section2">Some background</h2>
... Section 2 follows here ...
<h3 id="section2.1">Project History</h3>
... Section 2.1 follows here ...
39
Miscellaneous Tags
<hr/>: Draws a horizontal rule (line):

<hr size="5" width="70%" />

<center></center>: Deprecated!

<center>Hello World!</center>

<font></font>: Deprecated!
<font size="3" color="blue">Font3</font>
<font size="+4" color="blue">Font+4</font>

40
Miscellaneous Tags – Example
misc.html

<html>
<head>
<title>Miscellaneous Tags Example</title>
</head>
<body>
<hr size="5" width="70%" />
<center>Hello World!</center>
<font size="3" color="blue">Font3</font>
</body>
</html>

41
Lecture II
…..
Loading
Ordered Lists: <ol> Tag
Create an Ordered List using <ol></ol>:
<ol type="1">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>

Attribute values for type are 1, A, a, I, or i

1. Apple i. Apple
2. Orange ii. Orange
3. Grapefruit a. Apple iii. Grapefruit
A. Apple b. Orange I. Apple
B. Orange c. Grapefruit II. Orange
C. Grapefruit III. Grapefru
it

43
Unordered Lists: <ul> Tag
Create an Unordered List using <ul></ul>:
<ul type="disk">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>

Attribute values for type are:


disc, circle or square

• Apple o Apple  Apple


• Orange o Orange  Orange
• Pear o Pear  Pear

44
Definition lists: <dl> tag
Create definition lists using <dl>

Pairs of text and associated definition; text is in <dt> tag,


definition in <dd> tag
<dl>
<dt>HTML</dt>
<dd>A markup language …</dd>
<dt>CSS</dt>
<dd>Language used to …</dd>
</dl>

Renders without bullets

Definition is indented

45
Lists – Example
<ol type="1"> lists.html
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>
<ul type="disc">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>
<dl>
<dt>HTML</dt>
<dd>A markup lang…</dd>
</dl> 46
Symbol Name HTML Entity Symbol
copyright Sign &copy; ©
Registered Trademark Sign &reg; ®
Trademark Sign &trade; ™
Less Than &lt; <
Greater Than &gt; >
Ampersand &amp; &
Non-breaking Space &nbsp;

Em Dash &mdash; —
Quotation Mark &quot; "
Euro &#8364; €
British Pound &pound; 47
£
Japanese Yen &yen; ¥
Block and Inline Elements
Block elements add a line break before and after them

<div> is a block element

Other block elements are <table>, <hr>, headings, lists,


<p> and etc.

Inline elements don’t break the text before and after


them
<span> is an inline element

Most HTML elements are inline, e.g. <a> <label>


48
The <div> Tag
<div> creates logical divisions within a page

Block style element

Used with CSS

Example:

div.html
• <div style="font-size:24px; color:red">
• Div section
• </div>
49
•
Cont..
The <span> Tag
Inline style element

Useful for modifying a specific portion of text

Don't create a separate area (paragraph)

in the document

Very useful with CSS

span.html
<p>This one is <span style="color:red; font-
weight:bold">only a test</span>.</p>
<p>This one is another <span style="font-size:32px;
font-weight:bold">TEST</span>.</p>
51
HTML Tables
HTML Tables (2)
Tables represent tabular data
A table consists of one or several rows
Each row has one or more columns

Table Start and end of a table


<table> ... </table>

Rows Start and end of a row


<tr> ... </tr>

Columns Start and end of a cell in a row


<td> ... </td> 53
Simple HTML Tables – Example (2)
<table cellspacing="0" cellpadding="5" bgcolor="cyan"
border="3px">
<tr>
<td>Data one</td>
<td> Deta Two</td>
</tr>
<tr>
<td>Data three </td>
<td>Data Four </td>
</tr>
<tr>
<td>Data Five </td>
<td>Data Six</td>
</tr>
</table> 54
Cell Spacing and Padding
Tables have two important attributes:
 cellspacing  cellpadding

cell cell cell cell

cell cell cell cell


 Defines the
empty space  Defines the empty
between cells space around the cell
content
55
Cell Spacing and Padding – Example
table-cells.html
• <table cellspacing="15" cellpadding="0"
bgcolor="pink" border="3px">
• <tr>

• <td>First</td>
• <td>Second</td></tr>
• </table>
• <table cellspacing="0" cellpadding="15" bgcolor="cyan"
border="3px"> <tr><td>First</td>
• <td>Second</td></tr>

• </table>

56
Column and Row Span
• Table cells have two important attributes:
 Colspan  rowspan
colspan="1" colspan="1" rowspan="1"
rowspan="2"

cell[ cell[ cell[


1,1] 1,2] cell[1,1] 1,2]
cell[
cell[2,1]
2,1]
colspan="2" rowspan="1"
 Defines how many  Defines how
columns the cell many rows the
occupies cell occupies 57
HTML Forms

58
HTML Forms
Forms are the primary method for gathering data
from site visitors
Create a form block with
<form></form>
The “method" attribute tells how the form
Example:
data should be sent – via GET or POST
request
<form name="myForm" method=“POST/GET"
action="path/to/some-script.php">
……
...
</form>
The "action" attribute tells where the
form data should be sent 59
Form Fields
Single-line text input fields:
<input type="text" name="FirstName"
value="This is a text field" />

Multi-line textarea fields:


<textarea name="Comments">This is a
multi-line text field</textarea>

Hidden fields contain data not shown to the user:


<input type="hidden" name="Account"
value="This is a hidden text field" />

Often used by JavaScript code 60


Form Input Controls
Checkboxes:
<input type="checkbox" name="fruit"
value="apple" />

Radio buttons:
<input type="radio" name="title"
value="M." />
Radio buttons can be grouped, allowing only
one to be selected from a group:
<input type="radio" name="city" value="Lom" />
<input type="radio" name="city" value="Ruse" />
61
Other Form Controls
Dropdown menus:
<select name=“department">
<option value="Value 1"
selected="selected">cs</option>
<option value="Value 2">IS</option>
<option value="Value 3">IT</option>
</select>
Submit button:
<input type="submit" name="submitBtn"
value="Apply Now" />
62
Other Form Controls (2)
Reset button – brings the form to its initial state
<input type="reset" name="resetBtn"
value="Reset the form" />
Image button – acts like submit but image is
displayed and click coordinates are sent
<input type="image" src="submit.gif"
name="submitBtn" alt="Submit" />

Ordinary button – used for Javascript, no default


action
<input type="button" value="click me" />

63
Other Form Controls (3)
Password input – a text field which masks the entered
text with * signs
<input type="password" name="pass" />

Multiple select field – displays the list of items in multiple


lines, instead of one
<select name="products" multiple="multiple">
<option value="Value 1"
selected="selected">keyboard</option>
<option value="Value 2">mouse</option>
<option value="Value 3">speakers</option>
</select>
64
Other Form Controls (4)
File input – a field used for uploading files
<input type="file" name="photo" />
Form labels are used to associate an explanatory
text to a form field using the field's ID.
<label for="fn">First Name</label>
<input type="text" id="fn" />

Fieldsets are used to enclose a group of related form


fields:
The <legend> is the fieldset's title.

65
HTML Forms – Example

66
form.html
HTML Forms – Example
<form method="post" action="apply-now.php">
<input name="subject" type="hidden" value="Class" />
<fieldset style="width:300px"><legend>Personal Details</legend>
<table>
<tr>
<td><label for="fname">First Name</label></td>
<td><input type="text" name="fname" id="fname" /></td>
</tr>
<tr>
<td><label for="lname">Last Name</label></td>
<td><input type="text" name="lname" id="lname" /></td>
67
</tr>
form.html (continued)

<tr>
<td><label for="degree">Degree</label></td>
<td><select name="degree" id="degree">
<option value="BA">cs</option>
<option value="BS">SE</option>
<option value="MBA"
selected="selected">IT</option>
</select></td>
</tr>
<tr>
<td>Student ID</td>
<td><input type="text" name="s" /></td>
</tr>
68
Cont..
<tr>
<td>Password</td>
<td><input type="Password" placeholder="Enter Password" name="s" /></td>
</tr>
<tr>
<td>Gender:</td>
<td>
<input name="gender" type="radio" id="gm" value="m" />
<label for="gm">Male</label>
<input name="gender" type="radio" id="gf" value="f" />
<label for="gf">Female</label></td>
</tr>
Cont.…
<tr>
<td></td>
<td><button type="submit">send</button>
</td>
</tr>
</fieldset>
</form>
What is Multimedia?

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.
The HTML <video> Element

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

  <source src=“m.mp4" type="video/mp4">

  <source src=“m.ogg" type="video/ogg">

Your browser does not support the video tag.

</video>
The HTML <audio> Element

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
</audio>
HTML <audio> Autoplay

<audio controls autoplay>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
</audio>
HTML Plug-ins
Plug-ins are computer programs that extend the standard
functionality of the browser.

plug-ins were designed to be used for many different


purposes:
 To run Java applets

 To run Microsoft ActiveX controls

 To display Flash movies

 To display maps

 To scan for viruses

 To verify a bank id
Cont..
The <object> element defines an embedded object within an HTML
document.

It was designed to embed plug-ins (like Java applets, PDF readers, and
Flash Players) in web pages, but can also be used to include HTML in
HTML:
<object width="100%" height="500px" data="snippet.html"></object>

The <embed> element can also be used to include HTML in HTML:

<embed width="100%" height="500px" src="snippet.html">
Reading Assignment

HTML Graphics
• HTML Canvas
•HTML SVG
Thanks
?

You might also like