Scribd
Upload
23 views57 pages

HTML

Uploaded by

Asifa Abbasi
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
23 views57 pages

HTML

Uploaded by

Asifa Abbasi
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/ 57

Web Development

HTML
You will learn
• Languages and Tools for Web Development
• Key Concepts (URL, HTTP)
• How Websites Work (in short what happens under the hood)
• Basics of HTML and CSS
• Validating web pages
Languages and Tools for Web
Development

Front End Back End

HTML CSS JS
HTML (Hypertext Markup
Languages)
• HTML stands for Hyper Text Markup Language
• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements label pieces of content such as "this is a heading",
"this is a paragraph", "this is a link", etc.

SKELTON AND STRUCTURE (Building Blocks)


CSS (Cascading Styling Sheet)
• Cascading Style Sheets (CSS) is used to format the layout of a webpage.
• CSS gives style to raw HTML
• CSS is used to give style to our webpage
• CSS is used to make websites responsive
• CSS takes responsibility of design
• Inline - by using the style attribute inside HTML elements
• Internal - by using a <style> element in the <head> section
• External - by using a <link> element to link to an external CSS file

Pretty Walls, windows and Tiles


JS: JavaScript
• JavaScript is used by programmers across the world to create
dynamic and interactive web content like applications and browsers.

Special Functionality: Like Elevator/lights


Car Body Car Paint/Decor Car engine/interior
HTML - Blocks: CSS - Visual Effects
• Image • Round Picture
JS - Functionality
• User ID • User ID Bold
• Liking a comment
• Status • space b/w lines
• Like/Reuse/Comment • heart/likes

Markup Lang Styling Lang Programming Lang


How Website Works?
• Client request and Server Provides

CLIENT BROWSER SERVER


Session – 1
(HTML)
CREATING FIRST WEBSITE
A Basic HTML Page
<!DOCTYPE html>  Specifies this is an html doc
<html>   Root of an HTML Page
<head>   Contains page metadata
<title> My First Webpage </title>  Contains title
</head>   Head Close
<body>   The main body of the page (Rendered by browser)
<h1> This is heading </h1)  heading Tag
<p> My Paragraph </p>  Paragraph Tag
</body>   Closing body Tag
</html>   HTML Close
Important Notes
• Head and body tag are offspring's of HTML tags
• Almost all HTML elements/tags have opening tags and closing tags;
with contents between them
• Some tags/elements have no text/content; and are referred as empty
tags (e.g. <br>)
• Htm and html both can be used as an extension (but)
• View page source option of Chrome

HTML = opening tag + Content + closing tag


Comments in HTML
• The comment tag is used to insert comments in the source code.
Comments are not displayed in the browsers
<!--…………..-->

Case Sensitivity

NO
Session – 1: Practice

Write any HTML Code inside a text-file


(notepad)
Session – 2
(HTML)
Basics of HTML Tags
HTML elements
<body>  Opening Tag
 Content 
</body>   Closing Tag

HTML Attributes
It is used to add more information corresponding to an HTML tag
Example: <a href=“https://facebook.com”> Mark Zuckerberg </a>
Anchor tag attribute
<body leftmargin="200" rightmargin = "200" text = "white" bgcolor = "black">

<body background = "F:\\Photos\123.jpg">

<H1 align="center"> Lecture 1 of Web Development <H1>

<H1> <font color = "red">


Heading Tags
<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
Note: We should
<h3> Heading 3 </h3>
not use HTML
<h4> Heading 4 </h4>
headings to make
<h5> Heading 5 </h5>
text thick/bold
<h6> Heading 6 </h6>
<h7> Heading 7 </h7>
Paragraph Tag
This tag defines a paragraph. Browsers automatically add a single blank
line before and after each <p> element. It is usually a block of text.
<p> This is a paragraph </p>

Anchor Tag
The <a> tag defines a hyperlink, which is used to link from one page to
another.
<a href=“https://google.com”> Click here </a>
<P align= "justify"> <font size = "3" color = "red">

The HyperText Markup Language or HTML is the standard markup language


for documents designed to be displayed in a web browser. It can be
assisted by technologies such as Cascading Style Sheets (CSS) and
scripting languages such as JavaScript.

Web browsers receive HTML documents from a web server or from local
storage and render the documents into multimedia web pages. HTML
describes the structure of a web page semantically and originally
included cues for the appearance of the document.

</font> </p>

<p align="justify">
<p align="center">
<p align="left">
<p align="right">
<font face="Verdana, Arial, Helvetica, sans-serif"> </font>
<font color="#FF00CC"> </font>
Image Tag
The <img> tag is used to embed an image in an HTML page.
The <img> tag has two required attributes:
1. src - Specifies the path to the image
2. alt - Specifies an alternate text for the image (if image is not displayed)

<img src="images/profile.jpg" width="65" height="65" align="left"


border = "3" alt="Profile picture">

Bold, Italic and Underline


<b> This is bold </b>
<i> This is italic </i>
<u> This is underline </u>
horizontal Tag
The <hr> element is most often displayed as a horizontal rule
that is used to separate content (or define a change) in an HTML
page.
<hr>

Subscript and Superscript


This text is <sub> subscript </sub> text  This text contains subscript text.

This text is <sup> superscript </sup> text  This text contains superscript text
Pre Tag
The <pre> tag defines preformatted text. The text will be
displayed exactly as written in the HTML source code.

<pre>
This is Written
using pre
tag
</pre>
Session 2 - Practice

Create an HTML page with


1. a heading - a primary heading and subheadings
2. Add images
3. Use break and horizontal rule tag
4. Add paragraphs
5. Add Super and sub scripts tags
Session – 3
(HTML)
Lists and Tables
Lists
The <li> tag defines a list item. The <li> tag is used inside ordered
lists(<ol>), unordered lists (<ul>).
Ordered List Unordered List
<ol> <ul>
<li> Phone </li> <li> Home</li>
<li> PC </li> <li> About</li>
<li> Laptop</li> <li> Contact us</li>
<ol type=“I"> </ol> </ul>
<ul type="disc">
<ol type=“a">
<ul type="circle">
<ol type=“i">
<ul type="square">
<ol type=“A">
<ul type="none">
<ol type=“1">
<ul type="circle">
<li> Home</li>
<li> About</li>
<li> Contact us</li>
</ul>

<ol type="A">
<li> Phone </li>
<li> PC </li>
<li> Laptop</li>
</ol>
Tables
The <table> tag defines an HTML table. An HTML table consists of one <table>
element and one or more <tr>, <th>, and <td> elements.
1. The <tr> element defines a table row,
2. the <th> element defines a table header, and
3. the <td> element defines a table cell.

<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Colspan
The colspan attribute when used with <td> tag determines the number
of standard cells it should span.
<td colspan="2">

Rowspan
It contains a value i.e number Which specify the number of rows that a
table cell should span
<td rowspan=“2">
Cellspacing
The HTML <table> cellspacing Attribute is used to specify the space
between the cells. The cellspacing attribute is set in terms of pixels.
<table cellspacing="1“>

Cellpadding
The HTML <table> cellpadding Attribute is used to specify the space
between the cell content and cell wall. The cellpadding attribute is set
in terms of pixels.
<table cellpadding="1“>
<table width="941" height="355" border="2" cellspacing="1"
cellpadding="1" align="center">

<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>

<tr>
<td rowspan="2"> January</td>
<td>$100</td>
<td>$80</td>
</tr>

<tr>
<td>90</td>
<td>$80</td>
</tr>

</table>
Session 3 - Practice

Create an HTML page with


1. Video embedded inside it
2. Replace video with a YouTube video
3. Table displaying score of cricket players in a match using
HTML
EDITOR
Visual Studio code
• <!DOCTYPE html> This is an Html Document
• <html lang="en"> HTML opening and English language
• <head>
• <meta charset="UTF-8"> This attribute declares the page's character coding.
• <meta http-equiv="X-UA-Compatible" content="IE=edge"> (to have compatibility with
internet explorer)
• <meta name="viewport" content="width=device-width, initial-scale=1.0"> (to encourage
responsive design)
• <meta name=“keywords" content=“web course, html”> (for keywords so that seo get help)
• <title>Document</title>
• </head>
• <body>
• </body>
• </html>
• *Meta text are text used to describe the website and is mainly used in SEO (used to increase
web traffic by helping search engine)
Session – 1 (CSS)
Inline CSS
<p style= "color: red;">

This tutorial will teach you everything you need to know about CSS

</p>
Session – 2 (CSS)
Internal CSS
CSS Basic Syntax

Where Which What


change/style change/style change/style
has to be has to be has to be
made made made
Internal CSS
<head>
<style>
p{
color: blue;
}
<style>
</head>
<!DOCTYPE html> <body>
<html>
<head> <img src="images/profile.jpg">
<title> My First Webpage </title>
<style>
img {
width: 100px;
border-radius: 50px;
<p> I am teaching Web
float: left; development Course</p>
margin-right: 10px;
}
</body>
p{
font-weight: bold;
color: yellow; </html>
background-color: pink;
}
</style>
Session – 3 (CSS)
External CSS
External CSS

Index.html stylefile.css
<head>
<link rel= “stylesheet” href= p{
“stylefile.css”> Color: yellow;
}
</head>
Session – 4 (CSS)
Internal and External CSS
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Tutorial</title>
<style>
Internal CSS
p{
color:rgb(245, 184, 245);
Out of Internal or
background-color: seagreen;
external, which ever will
} come at the end, that
</style> styling will be followed
l C SS
<link rel="stylesheet" href=“stylefile.css"> rna
e
</head> Ext

<body>
<h3>This is CSS Tutorial</h3>
<!-- <p style="color: red; background-color: yellow;">This tutorial will teach you HTML/CSS</p> -->
<p>This tutorial will teach you everything you need to know about HTML/CSS</p>
</body>

</html>
Session – 5 (CSS)
CSS Selectors
• CSS selectors are used to select any content you want to
style.
• CSS selectors select HTML elements according to its id, class,
attribute, etc.
• Selectors make it easy for us to easily target single/multiple
HTML elements in the markup.
• Four types of CSS Selectors:
• CSS element Selector
• CSS id Selector
• CSS class Selector
• The CSS grouping Selector
Element Selector
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS selectors </title>
<style>
p{
color: red;}
</style>
</head>

<body>
<h3> CSS selectors </h3>
<p>This tutorial will teach you everything you need to know about HTML/CSS</p>
</body>

</html>
ID Selector
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS selectors </title>
<style> ID is unique ie. Can be
#option{
color: red;} used in only one tag
</style> like: website logo
</head>

<body> Class is multiple i.e. can


<h3> CSS selectors </h3>
<p id=“option"> This is a simple paragraph </p>
be used for multiple
<p> This is a second paragraph </p> similar tags like all paras
<p> This is a third paragraph </p> in the body
</body>
Class Selector Instead of two classes one class can be used
.text-bgcolor {
color: red ;
background-color: blue;}
<!DOCTYPE html>
<head> <body>
<title> CSS selectors </title> <p class= “textcolor bgcolor”> This is a
<style> simple paragraph </p>
#option {
color: red;} <p id=“option“ > This is a second
paragraph </p>
.textcolor {
color: red;}
<p> This is a third paragraph </p>
.bgcolor {
background-color: blue;}
</body>
</style>
</head>
</html>
Group Selector
<!DOCTYPE html>
<html> <body>
<head> <header> This is a header </header>
<title> CSS selectors </title
<style> <p class= "group"> This is a simple paragraph
#option </p>
Example:
{
ID selector
border: 2px solid green; <p id="option"> This is a second paragraph
color: rgb(38, 0, 255) </p>
}
Example: <p> This is a third paragraph </p>
header, footer, p.group
Group
{ Selector
color: red; <footer> This is a footer</footer>
background-color: blue; </body>
}
</style>
</html>
Example: Group Selector
Tutorial 17

External CSS
• The <link> element can be used to include an external stylesheet file
in your HTML document.

• An external style sheet is a separate text file with .css extension. You
define all the Style rules within this text file and then you can include
this file in any HTML document using <link> element.

• Here is the generic syntax of including external CSS file:

<head>
<link rel="stylesheet" href="mycss.css">
</head>
Example:
• Consider a simple style sheet file with a name mystyle.css having the
following rules:
h1, h2, h3 { color: blue;
text-transform: lowercase; }

<head>
<link rel="stylesheet" href="mycss.css">
</head>
ID vs. Class CSS: Which Should You
Use?
You should use a class if you need to
use the same selector more than once
within a page or a site. While an ID is
specific to a single element, classes
can be assigned to multiple elements
on a page or throughout the website.
They are not unique.
CSS Comments

• CSS comments are the same as what you must have learnt in any
technical language. It is written to explain the code and is helpful for
the users who read that code so that they can understand it easily.

• Comments are ignored by browsers, and the syntax to write them is:

/* Your comment */
The CSS Box Model
Every element composed of:
• content
• a border around the element
• padding between the content and the border
• a margin between the border and other content

You might also like