Scribd
Upload
25 views49 pages

Chapter Three Part I and Part II

Uploaded by

beshahashenafi32
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
25 views49 pages

Chapter Three Part I and Part II

Uploaded by

beshahashenafi32
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 49

Chapter Three

HTML
Skills with Web based
technologies
• Informing colleagues about progress on team projects.
• Using or contributing to the company intranet.
• Working with customers online.
• Posting or retrieving résumés.
• Gathering information from customers or community
members about their interests.
• Obtaining information from social networking
activities.
• Web developer
• Site designer
Cont…
• Site map:- A brief, hierarchical representation of a Web
site that enables visitors to quickly identify areas of the
site and navigate to them.
Markup Languages
• A series of commands used to format, organize and describe
information on a Web page.
• Web page creation by any method requires a working
knowledge of Hypertext Markup Language (HTML).
• HTML:- It is the standard markup language on the Web, and in
other settings. HTML is standardized by an organization
called the World Wide Web Consortium (W3C).
• Markup language that defines page structure, hyperlinks, graphics
and more to enable pages to render in Web browsers and other
devices.
• CSS:-Cascading Style Sheets (CSS) are rules in an external text
file that determine how to display HTML elements in your
Web pages.
• CSS contain formatting instructions that can define the font,
color and phrase elements used on a particular markup page.
What Is HTML
• It is Hyper Text Markup Language.

• A language for describing a web page (layout and


presentation).

• A markup language is a set of markup tags.

• The tags describe document content.

• HTML documents contain HTML tags and plain text.

• HTML documents are also called web pages.


HTML Tags
• HTML markup tags are usually called HTML tags.

• HTML tags are keywords (tag names) surrounded by angle


brackets.

• HTML tags normally come in pairs.

• 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

• <tagname>content</tagname>
Document Tree
HTML Documents
• All HTML documents must start with a 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>.

• <!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
HTML Attributes
• HTML elements can have attributes.
• Attributes provide additional information about an
element
• Attributes are always specified in the start tag
• Attributes come in name/value pairs like:
name="value“
• <html lang="en-US">
• <p align=“center”>
W3Schools is a web developer's site.
It provides tutorials and references covering
many aspects of web programming,
including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.
</p>
Cont…
• HTML Headings
• HTML headings are defined with the <h1> to <h6>
tags:
• <h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3> ….
• 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.
Cont…
• HTML Paragraphs
• HTML paragraphs are defined with the <p> tag:
• <p>This is a paragraph.</p>
<p>This is another paragraph.</p>
• A paragraph always starts on a new line, and browsers
automatically add some white space (a margin) before and
after a paragraph.
• 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:
Cont…
• Horizontal Line
• <hr> creates a horizontal line
• The <hr> element is used to separate content (or
define a change) in an HTML page:
• The <hr> tag is an empty tag, which means that it
has no end tag.
• Line Breaks
• <br> inserts a new line
• Use <br> if you want a line break (a new line)
without starting a new paragraph:
• The <br> tag is an empty tag, which means that it
has no end tag.
Cont…
• Preserve Formatting
• 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:
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
Cont…
• The HTML style attribute is used to add styles to an element, such as
color, font, size, and more.
• <tagname style="property:value;">
• Background Color
• <body style="background-color:orange;">

• <h1 style="background-color:powderblue;">This is a heading</h1>


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

</body>
• Text Color
• <h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Cont…
• Fonts
• <h1 style="font-family:verdana;">This is a
heading</h1>
<p style="font-family:courier;">This is a
paragraph.</p>
• Text Size
• <h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
• Text Alignment
• <h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
HTML Text Formatting
• 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
Cont’d…
• Comments
• HTML comments are not displayed in the browser, but
they can help document your HTML source code.
• <!-- Write your comments here -->
Cont…
• HTML Links – Hyperlinks
• A hyperlink is an element, a text, or an image that you can
click on, and jump to another document.
• A link does not have to be text. A link can be an image or any
other HTML element!
• links are defined with the <a> tag:
• <a href="url“ target=“”>link text</a>
• 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
Cont…
• HTML Links - Use an Image as a Link
• To use an image as a link, just put the <img> tag inside the
<a> tag:
• <a href="default.asp">
• <img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;">
• </a>
•HTML bookmarks are used to allow readers to jump to
specific parts of a Web page.
• Use the id attribute (id="value") to define bookmarks in
a page
• Use the href attribute (href="#value") to link to the
bookmark
Cont…
• HTML images
• 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.
• src - Specifies the path to the image
• alt - Specifies an alternate text for the image
• <img src="url" alt="alternate text“ style="width:
10px;height:10px;">
• <img src="url" alt="alternatetext“ width=“10px”
height=“10px“ style=“float:right”>
Cont…
• HTML Video
• <video width="320" height="240" autoplay controls>
<source src="movie.mp4" type="video/mp4">
</video>
• The controls attribute adds video controls, like play, pause,
and volume.
• To start a video automatically, use the autoplay attribute:
• Add muted after autoplay to let your video start playing
automatically (but muted):
• HTML Audio
• <audio height=“” width=“” autoplay controls>
• <source src="horse.mp3" type="audio/mpeg">
• </audio>
HTML Lists
• Unordered list
• An unordered list starts with the <ul> tag. Each list item
starts with the <li> tag.
• <ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea
<li>Milk</li>
</ul>
Cont.…..
• Ordered list
• A type attribute can be added to an ordered list, to
define the type of the marker:
• <ol type="1">
<li>Coffee</li>
<li>Tea
<li>Milk</li>
</ol>
Cont.…..
• Description list
• A description list, is a list of terms, with a description
of each term.
• The <dl> tag defines a description list.
• The <dt> tag defines the term (name), and the <dd>
tag defines the data (description).
• <dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML Tables
• HTML tables allow web developers to arrange data into rows and
columns.
• <table>
<tr>
<th>Name</th> -
<th>ID</th>
<th>Dept</th>
</tr>
<tr>
<td>Dereje Abebe</td>
<td>NSR/0231/20</td>
<td>IS</td>
</tr>
<tr>
<td>Elsa Getachew</td>
<td>GSR/3454/20</td>
<td>CS</td>
</tr>
</table>
Cont…
• Table border
• Border:
• Border-collapse:
• Border-style:(dotted, dashed, solid, double, groove, ridge….
• Border-color:
• Table Caption
• You can add a caption that serves as a heading for the entire table.
• Header for Multiple Columns
• You can have a header that spans over two or more columns.
• To do this, use the colspan attribute on the <th> element
• Header for Multiple rows
To make a cell span over multiple rows, use the rowspan attribute:
The value of the rowspan attribute represents the number of rows to
span.
Summary
• All HTML elements can have attributes
• The href attribute of <a> specifies the URL of the page the link
goes to
• The src attribute of <img> specifies the path to the image to be
displayed
• The width and height attributes of <img> provide size
information for images
• The alt attribute of <img> provides an alternate text for an image
• The style attribute is used to add styles to an element, such as
color, font, size, and more
• The lang attribute of the <html> tag declares the language of the
Web page
• The title attribute defines some extra information about an
element
Cont…
• 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
Cont…
• 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
• Use the id attribute (id="value") to define bookmarks in a page
• Use the href attribute (href="#value") to link to the bookmark
• 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
• Use the CSS float property to let the image float to the left or to the
right
Chapter Three
Part Two
HTML Forms
• HTML form
• An HTML form is used to collect user input. The user
input is most often sent to a server for processing.
<form>
Form elements
</form>
• The <form> element is a container for different types
of input elements, such as: text fields, checkboxes,
radio buttons, submit buttons, etc.
• An <input> element can be displayed in many ways,
depending on the type attribute.
Cont…
• <input type="text">
• Displays a single-line text input field
• <input type="radio">
• Displays a radio button (for selecting one of many
choices)
• <input type="checkbox">
• Displays a checkbox (for selecting zero or more of
many choices)
• <input type="submit">
• Displays a submit button (for submitting the form)
• <input type="button">
• Displays a clickable button
Cont…
• The <input type="text"> defines a single-line input field
for text input.
<form>
<label for=“fname”>First Name:</label></br>
<input type=“text” id=“fname” name=“fname”></br>
<label for=“lname”>Last Name:</label></br>
<input type=“text” id=“lname” value=“lname”></br>
</form>
• The <label> tag defines a label for many form
elements.
• The for attribute of the <label> tag should be equal to
the id attribute of the <input> element to bind them
together.
Cont…
• The <input type="radio"> defines a radio button.
• Radio buttons let a user select ONE of a limited number
of choices.
• The <input type="checkbox"> defines a checkbox.
• Checkboxes let a user select ZERO or MORE options of
a limited number of choices.
Cont…
• The <input type="submit"> defines a button for submitting
the form data to a form-handler.
• The form-handler is typically a file on the server with a
script for processing input data.
• The form-handler is specified in the form's action attribute.
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="Joh
n"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe
"><br><br>
<input type="submit" value="Submit">
</form>
Cont…
• Notice that each input field must have a name attribute
to be submitted.
• If the name attribute is omitted, the value of the input
field will not be sent at all. In this section your will not
learn about how servers are processing input.
Cont…
• The <option> elements defines an option that can be selected.
• By default, the first item in the drop-down list is selected.
• To define a pre-selected option, add the selected attribute to the option:
• <p>You can preselect an option with the selected attribute:</p>
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select id="cars" name="cars“ size=“2”>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
• Use the size attribute to specify the number of visible values:
• Use the multiple attribute to allow the user to select more than one
value: hold down ctrl key.
Cont…
• The <fieldset> element is used to group related data in a form.
• The <legend> element defines a caption for the <fieldset>
element.
<form action="/action_page.php">
<fieldset>
<legend>Personal Information:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"
><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
Cont…
• The <datalist> element specifies a list of pre-defined options for
an <input> element.
• Users will see a drop-down list of the pre-defined options as they
input data.
• The list attribute of the <input> element, must refer to the id
attribute of the <datalist> element.
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
Cont…
• <input type="button">
• <input type="button" onclick="alert('Hello World!')" value="Click
Me!">
• <input type="color">
• The <input type="color"> is used for input fields that should
contain a color.
• Depending on browser support, a color picker can show up in the
input field.
• <input type="date">
• The <input type="date"> is used for input fields that should
contain a date.
• Depending on browser support, a date picker can show up in the input
field.
Cont…
• <input type="datetime-local">
• The <input type="datetime-local"> specifies a date and
time input field, with no time zone.
<input type="datetime-local" id="birthdaytime"
name="birthdaytime">
• <input type="email">
<input type="email" id="email" name="email">
• <input type="file">
• The <input type="file"> defines a file-select field and a
"Browse" button for file uploads.
Cont…
• <input type="month">
• <input type="number">
• The <input type="number"> defines a numeric input
field.
• <input type="password">
• <input type="reset">
• <input type="reset"> defines a reset button that will
reset all form values to their default values:
• <input type="search">
Cont…
• <input type="tel">
• <input type="tel" id="phone" name="phone"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{2} -[0-9]{2}">
• <input type="time">
• <input type="url">
• <input type="week">
Cont…
Attributes Description
Checked Specifies that an input field should be pre-selected when the page
loads (for type="checkbox" or type="radio")

Disabled Specifies that an input field should be disabled


Max Specifies the maximum value for an input field
Maxlength Specifies the maximum number of character for an input field

Min Specifies the minimum value for an input field


Pattern Specifies a regular expression to check the input value against

Readonly Specifies that an input field is read only (cannot be changed)

Required Specifies that an input field is required (must be filled out)


Size Specifies the width (in characters) of an input field
Step Specifies the legal number intervals for an input field
value Specifies the default value for an input field
Cont…
• The <textarea> element defines a multi-line input field
(a text area):
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
• The rows attribute specifies the visible number of lines
in a text area.
• The cols attribute specifies the visible width of a text
area.
• define the size of the text area by using CSS:
<textarea name="message" style="width:200px; height:600px;“>
</textarea>
HTML DIV
• The <div> tag defines a division or a section in an HTML
document.
• The <div> tag is used as a container for HTML elements
- which is then styled with CSS or manipulated with
JavaScript.
• The <div> tag is easily styled by using the class or id
attribute.
• Any sort of content can be put inside the <div> tag!
• Note: By default, browsers always place a line break
before and after the <div> element.
Reading Assignment
Read more on html elements and Exercise!

You might also like