CL1000 – ICT - Lab
MAHAM SALEEM
DEPARTMENT OF COMPUTER SCIENCE
[email protected]
HTML CS JS
S
Structure/layout Style Logic
HTML =
Hyper Text
MarkupLanguage
HTML
Hyper Text Markup Language
HTML is the code that is used to
structure a web page and its content.
The component used to design the structure
of websites are called HTML tags.
Do you
imagine how
this page
would look like
without
HTML?
Looks ugly…
Doesn’t it?
First HTML File
index.html
It is the default name for a website's homepage
HTML Tag
A container for some content or other HTML tags
<p> This is a paragraph</p>
Content
Element
Basic HTML Page
<!DOCTYPE html> tells browser you are using HTML5
<html> root of an html document
<head> container for metadata
<title>My First Page</title> page title
</head>
<body> contains all data rendered by the browser
<p>hello world</p> paragraph tag
</body>
</html>
Activity
Create Your First HTML Page
Quick Points
Html tag is parent of head & body tag
Most of html elements have opening & closing tags
with content in between
Some tags have no content in between, eg - <br>
We can use inspect element/view page source to edit html
Comments in HTML
This is part of code that should not be parsed.
<!-- This is an HTML Comment -->
HTML is NOT case sensitive
<html> = <HTML>
<p > = < P >
<head> = <HEAD>
<body> = <BODY>
Basic HTML Tags
HTML Attributes
Attributes are used to add more information to the tag
<html lang="en">
Heading Tag
Used to display headings in HTML
h1 (most important)
h2
h3
h4
h5
h6 (least important)
Paragraph Tag
Used to add paragraphs in HTML
<p> This is a sample paragraph </p>
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>
Anchor Tag
Used to add links to your page
Absolute Link
<a href="https://google.com"> Google </a>
Relative Link
For add own web links
<a href="/FolderName/Filename.html"> My own</a>
Image Tag
Used to add images to your page
<img src="/image.png" alt="Random Image">
relative url
Br Tag
Used to add next line(line breaks) to your page
< b r>
Bold, Italic & Underline Tags
Used to highlight text in your page
<b> Bold </b>
<i> Italic </i>
<u> Underline </u>
Big & Small Tags
Used to display big & small text on your page
<big> Big </big>
<small> Small </small>
Hr Tag
Used to display a horizontal ruler, used to separate content
< h r>
Subscript & Superscript Tag
Used to display a horizontal ruler, used to separate content
<sub> subscript </sub>
H 2O
<sup> superscript </sup>
n
A+B
Pre Tag
Used to display text as it is (without ignoring spaces & next line)
<pre> This
is a
sample
text.
</pre>
Entities
► The browser ignores whitespace and any tags it does not
recognize
► So, how do you add an extra space where needed?
► Or, how do you display the greater-than and less-than
signs?
► Entities are special html codes used to display these and
other common symbols
► Entities start with an & sign
► They have a character abbreviation
► And end with a semicolon
► For example for a non-breaking space
Activity
Create Pages: Education, Experience & Project and
Link it with your Home Page
Page Layout Techniques
using Semantic tags for layout
using the Right Tags
<header>
<main>
<footer>
Inside Main
Tag
Section Tag For a section on your page
<section>
Article Tag For an article on your page
<article>
Aside For content aside main content(ads)
Tag
<aside>
Revisiting Anchor Tag
<a href="https://google.com" target="_main"> Google </a>
for new tab
<a href="https://google.com"> <img src="link"> </a>
clickable pic
Revisiting Image
Tag
<img src="link" height=50px >
set height
<img src="link" width=50px >
set width
Div
Tag
Div is a container used for other HTML elements
Block Element (takes full width)
List : Div Tags
<address> <fieldset> <nav>
<article> <figcaption> <noscript>
<aside> <figure> <ol>
<blockquote> <footer> < p>
<canvas> <form> <pre>
<dd> <h1>-<h6> <section>
<div> <header> <table>
<dl> <hr> <tfoot>
< dt > <li> <ul>
<main> <video>
Span
Tag
Span is also a container used for other HTML elements
Inline Element (takes width as per size)
<code> <output>
List : Span Tags <dfn> < q>
< a> <em> <samp>
<abbr> <i> <script>
<acronym> <img> <select>
< b> <input> <small>
<bdo> <kbd> <span>
<big> <label> <strong>
<br> <map> <sub>
<button> <object> <sup>
<cite> <tt> <textarea>
<var> <time>
Activity
Add your Image on the Hom Page& Useful Links to your
LinkedIn/Instagram Profiles, Also Improve Layout of Your
Portfolio
List in HTML
Lists are used to represent real life list data.
unordered ordered
<ul> <ol>
<li> Apple </li> <li> Apple </li>
<li> Mango </li> <li> Mango </li>
</ul> </ol>
A Nested List
<h2>A Nested List</h2>
<p>Lists can be nested (list inside list):</p>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
HTML Description Lists
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Tables in HTML
Tables are used to represent real life table data.
<tr> used to display table row
< t d> used to display table data
< t h> used to display table header
Tables in HTML Name Roll No
Amna 1664
<table>
<tr>
<th> Name </th>
<th> Roll No </th>
</tr>
<tr>
<td> Amna </td>
<td> 1664 </td>
</tr>
</table>
Caption in
Tables
<caption> Student Data </caption>
Student Data
NameRoll No
Amna 1664
thead & tbody in Tables
<thead> to wrap table head
<tbody> to wrap table body
Colspan attribute
colspan="n"
used to create cells which spans over multiple columns
<table >
<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 attribute
<table>
<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>
Activity
Form in HTML
Forms are used to collect data from the user
Eg- sign up/login/help requests/contact me
<form>
form content
</form>
Action in Form
Action attribute is used to define what action needs to be
performed when a form is submitted
<form action="/action.php" >
Form Element : Input
<input type="text" placeholder="Enter Name">
Label
<label for="id1">
<input type="radio" value="class XI" name="class" id="id1">Class XI
</label>
<label for="id2">
<input type="radio" value="class XII" name="class" id="id2"> Class XII
</label>
Class & Id
<div id="id1" class="group1">
</div>
<div id="id2"> class="group1">
</div>
Checkbox
<label for="id1">
<input type="checkbox" value="class XI" name="class" id="id1"> class XI
</label>
<label for="id2">
<input type="checkbox" value="class XII" name="class" id="id2"> class XII
</label>
Textarea
<textarea name="feedback" id="feedback" placeholder="Please add Feedback">
</textarea>
Select
<select name="city" id="city">
<option value=“FSD"> Faisalabad </option>
<option value="ISB"> Islamabad </option>
<option value="LHR"> Lahore </option>
</select>
<input type=“submit" value=“Submit">
iframe
Tag
website inside website
<iframe src="link"> Link </option>
Video
Tag
<video src="myVid.mp4"> My Video </video>
Attributes
- controls
- height
- width
- loop
- autoplay
Activity
• Make a website for Students
• Make a Sign-up Form
• Add Links/iframe
• Make a Table on Home page to show different topics Covered
in your Page
REFRENCES
https://www.w3schools.com/html/default.asp
