Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
24 views

Chapter 2 Introduction To HTML

شبتر 2 html

Uploaded by

sdwsy7393
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
24 views

Chapter 2 Introduction To HTML

شبتر 2 html

Uploaded by

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

University of Bisha

Faculty of Computing and Information Technology

Course title and code: Web Development(IT-541)

Chapter-2
Introduction t o HT M L

1
Chapter Contents

 How markup works: Elements and attributes


 HTML document structure
 Marking Text
 Hyperlinks.

2
Content Without Markup

Without HTML markup to describe content structure, text runs together; line breaks are ignored:

Black Goose Bistro

The Restaurant
The Black Goose Bistro offers casual lunch
and dinner fare in a relaxed atmosphere. The
menu changes regularly to highlight the
freshest local ingredients.

Catering
You have fun. We'll handle the cooking. Black
Goose Catering can handle events from snacks
for a meetup to elegant corporate
fundraisers.

Location and Hours


Seekonk, Massachusetts;
Monday through Thursday 11am to 9pm; Friday
and Saturday, 11am to midnight
HTML
•HTML stands for Hypertext Markup Language, and it is the
standard markup language for creating Web pages.

 Hypertext refers to the way in which Web pages (HTML


documents) are linked together. Thus, the link available on a
webpage is called Hypertext.

 Markup Language which means you use HTML to simply "mark-


up" a text document with tags that tell a web browser how to
structure it to display.
HTML document structure
HTML document structure

<!DOCTYPE html>
<html>
<head>

<title>This is document title</title>


</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph. </p>
<p>This is another paragraph. </p>

</body>
</html>
HTML-Example Explained
HTML Tags and Element
HTML Tags

• HTML uses of various tags to display the content.


• HTML tags are keywords (tag names) surrounded by angle brackets.
• HTML tags normally come in pairs like <p> and </p>.
• The first tag in a pair is the start tag, the second tag is the end tag.
• The end tag is written like the start tag, with a slash before the tag name.
• Start and end tags are also called opening tags and closing tags.
HTML Element
• An HTML element usually consists of a start tag and end tag, with the
content inserted in between.
• The HTML element is everything from the start tag to the end tag:
H T M L Attributes
• HTML Attributes are additional information that can be added to HTML tags
to define their properties or provide extra details about the elements they
represent.

• Attributes are typically specified within the opening tag of an HTML element
using the following syntax:

<element attribute="value">Content</element>
Example

<a href="http://oreilly.com">O’Reilly site</a>


Nesting Elements

Putting elements inside other elements is called nesting. Make sure


closing tags don’t overlap:

<div>
<h1>Headline</h1>
<p>This is <em>emphasized</em> text.</p>
</div>
Tools we need to write H T M L code
1.Text editor to write Html code and create html files. Examples:
• Note pad.
• Itom
• Visual studio code
• Sublime
• Notepad++(windows)
• Text Mate (Mac)
2.Web browser
The purpose of a web browser (Chrome, Edge, Firefox) is to read
HTML documents and display them correctly
<head> element
• The <head> Contains information about the HTML document.
• The HTML <head> element is a container for other elements like:
<title>, <meta>, <style>, <link>, <script>
• The <title> element defines the title of the document.
• The <title> element is used inside the <head> element.

The title is shown in the browser's page's tab.


<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page Title</title>
</head>
<body>
The content of the document......
</body>
</html>
Meta element
• HTML <meta> tag is used to represent information about the HTML
document.
• The metadata does not display on the webpage, but it is used by search
engines.
• The <meta> tag is placed within the <head> tag, and it can be used
more than one times in a document.
<meta charset="utf-8">
• It defines the character encoding.
• The value of charset is "utf-8" means it will support to display any language.
<body> element
• Everything inside <body> element will display in the browser:
• In the following sections, we will identify some tags that is written inside the
<body> element.

The title is shown in the browser's page's tab.

Html code Output


<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>


<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

</body>
</html>
Paragraph <p> element

Html code Output


<!DOCTYPE html> This is a paragraph1.
<html>
<body> This is a paragraph2.
<p>This is a paragraph1.</p>
<p>This is a paragraph2.</p> This is a paragraph3.
<p>This is a paragraph3.</p>
</body>
</html>
HTML Comments
• To leave a note in an HTML document, mark it up as a
• comment:

• <!-- start global navigation -->


• <ul>
• …
• </ul>
• <!-- end global navigation
and begin the main header
for content page -->

Text between <!-- and --> won’t display in the browser. Keep in mind
that they are still visible in the source.
Horizontal Lines <hr> element
<!DOCTYPE html>
<html>

<head>
<title>HTML hr Tag</title>
</head>

<body>
<p>This text will be followed by a horizontal line </p>
<hr >
</body>

</html>
HTML line Break

<br> is a single tag (empty tag). (It has no closing tag).


HTML Formatting element

<sup>  <sub> element defines subscript text.


 Subscript text appears below the normal line.
<sub>  The HTML <sup> element defines superscript text.
 Superscript text appears above the normal line.
<del>  <del> element defines text that has been deleted from a
document.
 Browsers will usually strike a line through deleted text
<ins>  <ins> element defines a text that has been inserted into a
document.
 Browsers will usually underline inserted text.
<small>  The HTML <small> element defines smaller text.
<mark>  <mark> element defines highlighted text.
HTML Formatting element cont..
<!DOCTYPE html>
<html lang="en">
<head>
<title>Formatting Text in HTML</title>
</head>
<body>
<p>This is <b>bold text</b>.</p>
<p>This is <strong>strongly important text</strong>.</p>
<p>This is <i>italic text</i>.</p>
<p>This is <em>emphasized text</em>.</p>
<p>This is <mark>highlighted text</mark>.</p>
<p>This is <small>smaller text</small>.</p>
<p>This is <sub>subscript</sub> and <sup>superscript</sup> text.</p>
<p>This is <del>deleted text</del>.</p>
<p>This is <ins>inserted text</ins>.</p>
<p>This is <u>underline text</u>.</p>
</body>
</html>
HTML images

• Inserting Images into Web Pages can improve the design and the appearance
of a web page.
<img src="url" alt="alternate text">

• In HTML, images are added with the <img> tag.


• The <img> tag is empty, it 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, if the user for some reason cannot view it
(because of slow connection, an error in the src attribute).The value of the alt attribute
should describe the image
HTML Hyperlinks

• HTML Hyperlinks are also called links.


• Hyperlinks are used to link one web page to another page of external website,
or any other page within a website, or to any section of the same page as
well.
• Hyperlink can be in the form of text or images.
• The HTML anchor tag (<a>) defines a hyperlink.

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

For example, to create a link to the Bisha university home page, you would use
the following code:

<a href= "https://www.ub.edu.sa/SitePages/Home.aspx">University of Bisha</a>


HTML Hyperlinks attributes

<a href= https://www.ub.edu.sa/SitePages/Home.aspx target=“_blank”>University of Bisha</a>


HTML lists
• HTML offers web authors three ways for specifying lists:
1. <ul> − An unordered list.
2. <ol> − An ordered list.
3. <dl> − A definition list.
<ul> Un ordered List
• Unordered list is created by using HTML <ul> tag.
• Each item in the list is marked with a bullet.

 Orange
 Apple
 Banana
Ordered List
Nested List

 item 1
 item 2
o sub-item 2.1
o sub-item 2.2
 item 3
Definition List
• In definition lists the entries are listed like a dictionary.

• The definition list is the ideal way to present a glossary, list of terms, or other name/value list.
• Definition List makes use of following three tags.

o <dl> − Defines the start of the list.


o <dt> − A term.
o <dd> − Term definition.

HTML
This stands for Hyper Text Markup
Language
HTTP
This stands for Hyper Text Transfer
Protocol
HTML table
 <table> element defines the start and end of the table.
 <caption> element defines the caption of the table.
 <thead> element defines the header row(s) of the table.
 <th>Within the header row, data is displayed in individual cells
using the
 <tbody> element defines the body of the table.
 <tr> element defines the row in the table.
• (for header cells).
 <td> Within each body row, and footer row, data is displayed in
individual cells using the (for data cells).
HTML table
HTML table allows you to arrange data into rows and columns.
Span of columns and rows

 COLSPAN
 COLSPAN Sets the number of columns this cell will occupy.
<TABLE BORDER=1>
<TR><TH COLSPAN=“2”>Col 1&2 Heading</TH>
<TH>Col3 Heading</TH>
</TR>
<TR><TD>Col1 Data</TD>
<TD>Col2 Data</TD>
<TD>Col3 Data</TD>
</TABLE>

 ROWSPAN
 ROWSPAN Sets the number of rows this cell will occupy.
HTML forms
An HTML form is used to collect user input.

Syntax <form action="" methods="">

form elements

</form>
Elements inside<form>:

• The <form> contains different types of elements.


<label>
• The <label> element is used to define the labels for form elements.
• Clicking on the label will focus the text input and place the text
cursor inside.
<label for="username">Username:</label>
<input type="text" id="username">
Radio Button
• Radio buttons are used to let the user select exactly one option from
a pre- defined set of options.

<input type="radio" name="gender" id="male" value="male">


<label for="male">Male</label>

• <input type="radio" name="gender" id="female" value="female">


• <label for="female">Female</label>

• Radio button name attribute should be same to work in group


correctly
CheckBox
• Checkboxes allows the user to select one or more option from a pre-
defined set of options.

<input type="checkbox" name="sport1" id="soccer"value="soccer">


<label for="soccer">Soccer</label>

<input type="checkbox" name="sport2" id="tennis" value="tennis">


<label for="tennis">Tennis</label>

<input type="checkbox" name="sport3" id="baseball"value="baseball">


<label for="baseball">Baseball</label>

• If you want to make a radio button or checkbox selected by default, youcan add the
checked attribute to the input element:
• <input type="checkbox" checked>.
CheckBox
• Checkboxes allows the user to select one or more option from a pre-
defined set of options.

<input type="checkbox" name="sport1" id="soccer"value="soccer">


<label for="soccer">Soccer</label>

<input type="checkbox" name="sport2" id="tennis" value="tennis">


<label for="tennis">Tennis</label>

<input type="checkbox" name="sport3" id="baseball"value="baseball">


<label for="baseball">Baseball</label>

• If you want to make a radio button or checkbox selected by default, youcan add the
checked attribute to the input element:
• <input type="checkbox" checked>.
Submit and Reset
• A submit button is used to send the form data to a web server.
• When submit button is clicked the form data is sent to the file
specified in the form's action attribute to process the submitted data.
• A reset button resets all the forms control to default values.

<input type="submit" value="Send">

<input type="reset" value="Cancel">


<input> Element attributes
Attribute Description Example
Required Specifies that an input field input type="text" name="firstname" value="John" required>
is required (must be filled
out)
Specifies the width (in <input type="text" name="firstname" value="John" size=”40”>
Size characters) of an input field

Readonly Specifies that an inputfield is <input type="text" name="firstname" value="John" readonly>


read only (cannotbe changed)

Disabled Specifies that an input field <input type="text" name="firstname" value="John" disabled>
should be disabled

Max Specifies the maximum value <input type="number" name="quantity" min="1" max="5">
for an input field

Min Specifies the minimum value <input type="number" name="quantity" min="1" max="5">
for an input field

Maxlength Specifies the maximum <input type="text" name="firstname" value="John" maxlength=”10”>


number of character for an
input field

Placeholder specifies a hint that <input type="text" name="fname" placeholder="First name">


describes the expected value
of an input field
TextArea
• Textarea is a multiple-line text input control that allows a user to enter more than
one line of text

• <label for="address">Address:</label>
• <textarea rows="3" cols="30" name="address"id="address"></textarea>
<select> element for dropdown list
<label for="city">City:</label>
<select name="city" id="city">
<option value="sydney">Sydney</option>
<option value="melbourne">Melbourne</option>
<option value="cromwell">Cromwell</option>
</select>
Grouping Form Elements

• The <fieldset> element groups related data in a form.


• The <legend> element defines a caption for the <fieldset> element.
<form>
<fieldset>
<legend>Contact Details</legend>
<label>Email Address: <input type="email"name="email"></label>
<label>Phone Number: <input type="text"name="phone"></label>
</fieldset>
</form>
Adding Video

 To add the video to the HTML page, we use the <video> tag.

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


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

 In this example, we have set the width and height of the video player to320px
and 240px, respectively.
 The controls attribute adds basic playback controls such as play, pause,and
volume controls.
 The <source> tag specifies the location of the video file, and the type
attribute specifies the format of the video
Adding Audio

 To add the video to the HTML page, we use the <audio> tag.

<audio controls>
<source src="audioFile.mp3" type="audio/mpeg">
</audio>

 The controls attribute adds a set of controls to the audio player such as play, pause, and
volume controls.
 The <source> tag specifies the location of the audio file, and the type attribute specifies the
type of the audio file.
Block and Inline element
 Block element
• A block-level element always starts on a new line.
• A block-level element always takes up the full width available.
• A block level element has a top and a bottom margin, whereas an inline element does
not.
• Examples: <h1> to<h6>, <p>, <ol>,<ul>,<div>etc.

 Inline element
• An inline element does not start on a new line.
• An inline element only takes up as much width as necessary.
 Examples: <a>, <img>,<b>,<i>,<u>,<input> <span>, etc.
<div> element
• The <div> tag is known as Division tag.
• The <div> tag is generally used by web developers to
group HTML elements together and apply CSS styles to
many elements at once.

<div >
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
Thank You

46

You might also like