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

Week 1 - HTML

HTML basic info for newbie

Uploaded by

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

Week 1 - HTML

HTML basic info for newbie

Uploaded by

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

Today’s Agenda

Module 1: Introduction to basic HTML elements.

Module 2: Implementation of the Inline, Block Level, Text Formatting Tag

Module 3: HTML Image Tag

Module 4: HTML Links

Module 5: Order and Unorder Lists

Module 6: Table Creation in HTML

Module 7: Forms Creation and Input Types

Module 1: Introduction to basic HTML elements.


Introduction:
1. What is HTML?
• A series of tags that are integrated into a text document.
• These look like: <code>formatted text</code> o <code> begins the formatting tag. o </code>
ends the formatting tag.
• These tags are then read by a Browser, which translates the tags into the formatting that they
represent.
2. What are Tags?
• HTML tags are used to mark-up HTML elements.
• HTML tags are surrounded by the two characters < and >.
• The surrounding characters are called angle brackets.
• 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.
• The text between the start and end tags is the element content.
• HTML tags are not case sensitive; <b> means the same as <B>.
Note: There are two types of Tags (Single Tags, Pair Tags).
3. Structure Tags In HTML
HTML Tag

<HTML></HTML>
These tags begin and end an HTML document.

HEAD Tag

<HEAD></HEAD>
These tags are in the beginning of the document. Important information is stored in- between these tags
including: title, meta-data, styles, and programming scripts

TITLE Tag

<TITLE></TITLE>
These tags are in-between the HEAD tags and contain the text that appears in the title of the Web page.

BODY Tag

<BODY></BODY>
As you may have guessed, the BODY tags contain all the text in the body of the document.

HTML Page Structure:


Note:

• The content inside the <body> section (the white area above) will be displayed in a browser.
• The content inside the <title> element will be shown in the browser's title bar or in the page's
tab.

Tools: Notepad Editor and Web Browser like Internet Explorer, Google Chrome or Mozilla Firefox.

Standard Procedure for Creating and View an HTML document?

• Use a text editor such as Notepad/Notepad++ to write the document.

• Save the file as filename.html on a PC. This is called the Document Source.
• Open the file that you have saved in any browser Off-Line.

• Your HTML page should now appear just like any other Web page in browser.

• You may now switch back and forth between the Source and the HTML.

Sample Code:

<!DOCTYPE html>
<html>
<head>
<title>First Page</title>
</head>
<body>

<h1>Welcome to Web Programming</h1>


<p>My first paragraph. </p>

</body>
</html>

Lab Task 1:
Build Your First Webpage having your name, roll number, and brief about
yourself.

Module 2: Implementation of the Inline, Block Level, Text Formatting Tag

Block Level Tags:


• A block-level element always starts on a new line.
• A block-level element always takes up the full width available (stretches out to the left and right
as far as it can).
• A block level element has a top and a bottom margin, whereas an inline element does not.

2.1 HTML Headings:


Headings are defined with the <h1> to <h6> tags.

Where:<h1> -Defines the largest headings.

<h6> -Defines the smallest headings.

2.2 HTML Paragraphs:


Paragraphs are defined with the <p> tag.
2.3 HTML Line Breaks -
Use the <br/> tag if you want a line break (a new line) without starting a new paragraph.

2.4 Horizontal Rule


The <hr> element is used for horizontal rules that act as dividers between sections.

2.5 Div Tag


The <div></div> element is used for horizontal rules that act as dividers between sections.

Text Formatting Tags:

• <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

Inline Tags:
• An inline element does not start on a new line.
• An inline element only takes up as much width as necessary.

<span>Hello World</span>
<b>Hello World</b>
Lab Task 2:
Demonstrate the following output using HTML.
Module 3: HTML Image Tag

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.

The <img> tag is empty, it contains attributes only, and 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

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">


Lab Task 3:
Download the Logo of FAST-NU form Google and display on your webpage in
500 by 500 dimension.

Module 4: HTML Links

• 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

The HTML <a> tag defines a hyperlink. It has the following syntax:

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

The most important attribute of the <a> element is the href attribute, which indicates the link's
destination.

The link text is the part that will be visible to the reader.

Clicking on the link text, will send the reader to the specified URL address.

<a href="https://www.w3schools.com/">Visit W3Schools.com! </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

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools! </a>

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>
Lab Task 4:
Make the FAST-NU Logo link to fast website and website should be open in
new tab.

Module 5: List in HTML

Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

HTML Code:
<!DOCTYPE html>
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Output:

Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Lab Task 5:
Develop the following webpage using following output.

Module 6: Table Creation in HTML

Define an HTML Table

<TABLE> Table
(made up of rows)

<TR> Row
(made up of data cells)

<TH> Heading Data Cell


(Can contain paragraphs, images, lists,

forms, tables)

<TD> Data Cell


(Can contain paragraphs, images, lists,

forms, tables)

<!DOCTYPE html>
<html>
<body>
<h2>A basic HTML table</h2>
<table border="1">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
<p>To undestand the example better, we have added borders to the
table.</p>
</body>
</html>
Output:

Colspan:

<table style="width:100%">
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>

Rowspan:
<table style="width:100%">
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>

Lab Task 6:
Draw the following table on your webpage. Use the structure mentioned
below.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
</body>
</html>

Lab Task 7:
Draw the following table on your webpage.

Module 7: Forms Creation and Input Types

HTML forms are used to get input data from the user.

<!DOCTYPE html>
<html>
<body>
<h2>Text input fields</h2>
<form>
<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">
</form>
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of text input fields is 20
characters.</p>
</body>
</html>

Radio Buttons

<!DOCTYPE html>
<html>
<body>
<h2>Radio Buttons</h2>
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language"
value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
</body>
</html>

The Action Attribute

The action attribute defines the action to be performed when the form is submitted.

Usually, the form data is sent to a file on the server when the user clicks on the submit button.

In the example below, the form data is sent to a file called "action_page.php". This file contains a server-
side script that handles the form data:

<form action="/action_page.php">
<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">
</form>

The Method Attribute

The method attribute specifies the HTTP method to be used when submitting the form data.

The form-data can be sent as URL variables (with method="get") or as HTTP post transaction
(with method="post").

HTTP supports several methods for making requests, and two of the most commonly used methods are
GET and POST. Here are the key differences between GET and POST requests:

GET Request:

• Data in URL:

The data is appended to the URL as a query string.

Example: https://example.com/page?param1=value1&param2=value2

• Visibility:

Parameters are visible in the URL.

Not suitable for sensitive data or large amounts of data.

• Caching:

Requests can be cached by the browser.

Data is stored in the browser's history.

• Idempotent:

GET requests are considered idempotent, meaning that making the same request multiple times
produces the same result.

• Bookmarking:

GET requests can be bookmarked and shared easily.

• Limitations:
Limited data size due to URL length restrictions.

Limited to ASCII characters.

Example in HTML Form:

<form action="/example" method="GET">

<input type="text" name="param1" value="value1">

<input type="text" name="param2" value="value2">

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

</form>

POST Request:

• Data in Request Body:

The data is sent in the request body.

Not visible in the URL.

• Visibility:

Parameters are not visible in the URL.

Suitable for sensitive data and large amounts of data.

• Caching:

POST requests are typically not cached by the browser.

Data is not stored in the browser's history.

• Idempotent:

POST requests are not considered idempotent.

Making the same request multiple times may have different results.

• Bookmarking:

POST requests cannot be easily bookmarked or shared.


• No Size Limitations:

Can handle larger data sizes compared to GET requests.

Not limited by URL length restrictions.

Example in HTML Form:

<form action="/example" method="POST">

<input type="text" name="param1" value="value1">

<input type="text" name="param2" value="value2">

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

</form>

Choosing Between GET and POST:

Use GET when:

• The request is idempotent (repeating the same request has the same effect).
• Parameters are small and don't involve sensitive data.
• You want to allow bookmarking and caching.

Use POST when:

• The request has side effects (e.g., changing data on the server).
• Parameters are large or involve sensitive data.
• You want to avoid exposing data in the URL.

In practice, both GET and POST requests are commonly used in web development, and the choice
depends on the specific requirements of the application.

The default HTTP method when submitting form data is GET.

Input Types

• <input type="button">
• <input type="checkbox">
• <input type="color">
• <input type="date">
• <input type="datetime-local">
• <input type="email">
• <input type="file">
• <input type="hidden">
• <input type="image">
• <input type="month">
• <input type="number">
• <input type="password">
• <input type="radio">
• <input type="range">
• <input type="reset">
• <input type="search">
• <input type="submit">
• <input type="tel">
• <input type="text">
• <input type="time">
• <input type="url">
• <input type="week">

Input Type Password

<!DOCTYPE html>
<html>
<body>
<h2>Password field</h2>
<p>The <strong>input type="password"</strong> defines a password
field:</p>
<form action="/action_page.php">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd"><br><br>
<input type="submit" value="Submit">
</form>
<p>The characters in a password field are masked (shown as asterisks or
circles).</p>
</body>
</html>
Lab Task 8:
Create a sign-up form on your webpage must including Input Fields (User
Name, Email, Password, Confirm Password), Button (Submit, Reset).
Lab Task 9:
Create the following form using HTML.

Visit Link to Practice More About Forms:


https://www.w3schools.com/html/html_forms.asp
References

HTML tutorial. (n.d.). Retrieved February 8, 2022, from https://www.w3schools.com/html

“The Basics of HTML Attributes” February 07, 2011,


http://www.ironspider.ca/basic_html/attributes.htm

You might also like