Web Dev Essential 1web dev using HTML DHTML.pptx

HTML Introduction
• HTML is the standard markup language for creating Web pages.
• What is HTML?
 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.

HTML Introduction
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

HTML Elements
• An HTML element is defined by a start tag, some content, and an end
tag.
• The HTML element is everything from the start tag to the end tag:
• <tagname>Content goes here...</tagname>
• Examples of some HTML elements:
• <h1>My First Heading</h1>
• <p>My first paragraph.</p>

HTML Attributes
• HTML attributes provide additional information about HTML
elements.
• HTML Attributes
 All HTML elements can have attributes
 Attributes provide additional information about elements
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"
• The href Attribute
The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:
<a href="https://www.gcmsmansehra.com">Visit GCMS
Mansehra</a>
<img src=“abc.jpg">

HTML Headings
<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>

HTML Paragraphs
• A paragraph always starts on a new line, and browsers automatically
add some white space (a margin) before and after a paragraph.
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
</body>
</html>

HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.
The <hr> element is used to separate content (or define a change) in an HTML page:
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<p>This is some other text.</p>
<hr>
<p>This is some other text.</p>
</body>
</html>

HTML Line Breaks
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new paragraph:
<!DOCTYPE html>
<html>
<body>
<p>This is<br>a paragraph<br>with line breaks.</p>
</body>
</html>

The Poem Problem
• This poem will display on a single line: <!DOCTYPE html>
<html>
<body>
<p>In HTML, spaces and new lines are ignored:</p>
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
Oh, bring back my Bonnie to me.
</p>
</body>
</html>

Solution- The HTML <pre> Element
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:
<!DOCTYPE html>
<html>
<body>
<p>The pre tag preserves both spaces and line breaks:</p>
<pre>
My Bonnie lies over the sea.
Oh, bring back my Bonnie to me.
</pre>
</body>
</html>

HTML Styles
The HTML style attribute is used to add styles to an element, such as color, font, size, and more.
<!DOCTYPE html>
<html>
<body>
<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>
</body>
</html>
<tagname style="property:value;">

HTML Styles
<body style="background-color:powderblue;">
Text Color
The CSS color property defines the text color for an HTML element:
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Fonts
The CSS font-family property defines the font to be used for an HTML element:
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
Text Size
The CSS font-size property defines the text size for an HTML element:
<p style="font-size:160%;">This is a paragraph.</p>

Cont…
Text Alignment
The CSS text-align property defines the horizontal text alignment for an HTML element:
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
</body>
</html>

HTML Text Formatting
HTML Formatting Elements
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
<b>This text is bold</b>
<strong>This text is important!</strong>
<i>This text is italic</i>
<small>This is some smaller text.</small>
<p>Do not forget to buy <mark>milk</mark> today.</p>
<p>My favorite color is <del>blue</del> red.</p>
<p>My favorite color
is <del>blue</del> <ins>red</ins>.</p>
<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>
<em>This text is emphasized</em>

HTML Block and Inline Elements
Every HTML element has a default display value, depending on what type of element it is.
The two most common display values are block and inline.
block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.
A block-level element always takes up the full width available (stretches out to the left and right as far as it can).
Two commonly used block elements are: <p> and <div>.
The <p> element defines a paragraph in an HTML document.
The <div> element defines a division or a section in an HTML document.
<!DOCTYPE html>
<html>
<body>
<p style="border: 1px solid black">Hello World</p>
<div style="border: 1px solid black">Hello World</div>
<p>The P and the DIV elements are both block elements, and
they will always start on a new line and take up the full width
available (stretches out to the left and right as far as it
can).</p>
</body>
</html>

Inline Elements
An inline element does not start on a new line.
An inline element only takes up as much width as
necessary.
This is a <span> element inside a paragraph. <!DOCTYPE html>
<html>
<body>
<p>This is an inline span <span style="border: 1px solid
black">Hello World</span> element inside a paragraph.</p>
<p>The SPAN element is an inline element, and will not start o
a new line and only takes up as much width as necessary.</p>
</body>
</html>

The <div> Element
The <div> element is often used as a container for other HTML elements.
The <div> element has no required attributes, but style, class and id are common.
<!DOCTYPE html>
<html>
<body>
<div style="background-
color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most
populous city in the United Kingdom, with a metropolitan area
of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major
settlement for two millennia, its history going back to its
founding by the Romans, who named it Londinium.</p>
</div>
</body>
</html>

The <span> Element
The <span> element is an inline container used to mark up a part of a text, or a part of a document.
The <span> element has no required attributes, but style, class and id are common.
<!DOCTYPE html>
<html>
<body>
<h1>The span element</h1>
<p>My mother has <span style="color:blue;font-
weight:bold;">blue</span> eyes and my father has <span
style="color:darkolivegreen;font-weight:bold;">dark
green</span> eyes.</p>
</body>
</html>

HTML Colors
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-
color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>

Background Color
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.
</p>
</body>
</html>

Text Color
<!DOCTYPE html>
<html>
<body>
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p style="color:MediumSeaGreen;">Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>

Border Color
<!DOCTYPE html>
<html>
<body>
<h1 style="border: 2px solid Tomato;">Hello World</h1>
<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>
<h1 style="border: 2px solid Violet;">Hello World</h1>
</body>
</html>

Color Values <!DOCTYPE html>
<html>
<body>
<p>Same as color name "Tomato":</p>
<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99,
71)</h1>
<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%,
64%)</h1>
<p>Same as color name "Tomato", but 50% transparent:</p>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255,
99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9,
100%, 64%, 0.5)</h1>
<p>In addition to the predefined color names, colors can be
specified using RGB, HEX, HSL, or even transparent colors using
RGBA or HSLA color values.</p>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<h1>Multiple DIV Elements</h1>
<div style="background-color:#FFF4A3;">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>
<div style="background-color:#FFC0C7;">
<h2>Oslo</h2>
<p>Oslo is the capital city of Norway.</p>
<p>Oslo has over 600.000 inhabitants.</p>
</div>
<div style="background-color:#D9EEE1;">
<h2>Rome</h2>
<p>Rome is the capital city of Italy.</p>
<p>Rome has almost 3 million inhabitants.</p>
</div>
<p>CSS styles are added to make it easier to separate the divs,
and to make them more pretty:)</p>
</body>
</html>

<body>
<h1>Flexbox Example</h1>
<p>Align three DIV elements side by side.</p>
<div class="mycontainer">
<div style="background-color:#FFF4A3;">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>
<div style="background-color:#FFC0C7;">
<h2>Oslo</h2>
<p>Oslo is the capital city of Norway.</p>
<p>Oslo has over 600.000 inhabitants.</p>
</div>
<div style="background-color:#D9EEE1;">
<h2>Rome</h2>
<p>Rome is the capital city of Italy.</p>
<p>Rome has almost 3 million.</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
}
.mycontainer > div {
width:33%;
}
</style>
</head>

Multiple Classes
Here, all three h2 elements belongs to the "city" class. In addition, London also belongs to the "main" class, which
center-aligns the text.
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
.main {
text-align: center;
}
</style>
</head>
<body>
<h2>Multiple Classes</h2>
<p>Here, all three h2 elements belongs to the "city" class. In
addition, London also belongs to the "main" class, which
center-aligns the text.</p>
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
</body>
</html>

HTML id Attribute
The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML
document.
The id attribute is used to point to a specific style declaration in a style sheet. It is also used by JavaScript to access and
manipulate the element with the specific id.
The syntax for id is: write a hash character (#), followed by an id name. Then, define the CSS properties within curly braces
{}.
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h2>The id Attribute</h2>
<p>Use CSS to style an element with the id "myHeader":</p>
<h1 id="myHeader">My Header</h1>
</body>
</html>

Difference Between Class and ID
A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element
within the page:
<!DOCTYPE html>
<html>
<head>
<style>
/* Style the element with the id "myHeader" */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
/* Style all elements with the class name "city" */
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2>Difference Between Class and ID</h2>
<p>A class name can be used by multiple HTML elements, while an id
name must only be used by one HTML element within the page:</p>

<h1 id="myHeader">My Cities</h1>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</body>
</html>

HTML Layout Elements and Techniques

HTML Forms
An HTML form is used to collect user input. The user input is most often sent to a server for
processing.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<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>
<p>If you click the "Submit" button, the form-data will be sent
to a page called "/action_page.php".</p>
</body>
</html>

The <form> Element
The HTML <form> element is used to create an HTML form for user input:
<form>
.
form elements
.
</form>

The <input> Element
Type Description
<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

Text Fields
The <input type="text"> defines a single-line input field for text input.
<!DOCTYPE html>
<html>
<body>
<h2>Text input fields</h2>
<form>
value="John"><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>

Checkboxes
<!DOCTYPE html>
<html>
<body>
<h2>Checkboxes</h2>
<p>The <strong>input type="checkbox"</strong> defines a
checkbox:</p>
<input type="checkbox" id="vehicle1" name="vehicle1"
value="Bike">
<label for="vehicle1"> I have a bike</label><br>
value="Car">
<label for="vehicle2"> I have a car</label><br>
value="Boat">
<label for="vehicle3"> I have a boat</label><br><br>
</form>
</body>
</html>

Select
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

Textarea
<textarea name="message" rows="10" cols="30">The cat was
playing in the garden.</textarea>
<br><br>
<input type="submit">
</form>

The <fieldset> and <legend> Elements
<!DOCTYPE html>
<html>
<body>
<h2>Grouping Form Data with Fieldset</h2>
<p>The fieldset element is used to group related data in a form,
and the legend element defines a caption for the fieldset
element.</p>
<fieldset>
<legend>Personalia:</legend>
value="John"><br>
</fieldset>
</form>

Reset
value="John"><br>
<input type="reset" value="Reset">
</form>

Input Type File
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile"><br><br>
</form>

Web Dev Essential 1web dev using HTML DHTML.pptx

Recommended

More Related Content

Similar to Web Dev Essential 1web dev using HTML DHTML.pptx (20)

Recently uploaded (20)

Web Dev Essential 1web dev using HTML DHTML.pptx