Scribd
Upload
15 views65 pages

Unit 1

The document provides a comprehensive overview of HTML and CSS, detailing the structure of HTML documents, various elements, and attributes used in web development. It covers topics such as HTML forms, links, images, tables, and semantic elements, as well as CSS styling techniques including inline, internal, and external styles. Additionally, it explains the use of multimedia elements like audio and video, and introduces advanced CSS features like multiple background images.

Uploaded by

remarkable683
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
15 views65 pages

Unit 1

The document provides a comprehensive overview of HTML and CSS, detailing the structure of HTML documents, various elements, and attributes used in web development. It covers topics such as HTML forms, links, images, tables, and semantic elements, as well as CSS styling techniques including inline, internal, and external styles. Additionally, it explains the use of multimedia elements like audio and video, and introduces advanced CSS features like multiple background images.

Uploaded by

remarkable683
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/ 65

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


Example 1
• The <!DOCTYPE html> declaration defines that this document is an HTML5

<!DOCTYPE html> document


• The <html> element is the root element of an HTML page
<html>
• The <head> element contains meta information about the HTML page
<head>
• The <title> element specifies a title for the HTML page (which is shown in the
<title>Page Title</title>
browser's title bar or in the page's tab)
</head> • The <body> element defines the document's body, and is a container for all the
<body> visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists,
<h1>My First Heading</h1> etc.
<p>My first paragraph.</p>• The <h1> element defines a large heading

</body> • The <p> element defines a paragraph

</html>
HTML Page Structure
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"


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>
Background Color
<!DOCTYPE html>
<html>
<body style="background-color:blue;">
<h1 style="background-color:red;">This is a
heading</h1>
<p style="background-color:tomato;">This
is a paragraph</p>
</body>
</html>
CSS
• Cascading Style Sheets (CSS) is used to format the layout of a
webpage

• With CSS, you can control the color, font, the size of text, the spacing
between elements, how elements are positioned and laid out,

• what background images or background colors are to be used,


different displays for different devices and screen sizes, and much
more!
CSS Types

1. Inline - by using the style attribute inside HTML elements

2. Internal (embedded)- by using a <style> element in the <head>

section

3. External - by using a <link> element to link to an external CSS file


1.Inline
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
</body>
</html>
2.Internal (embedded)

<!DOCTYPE html>
<html> <head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style> </head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
3.External
home.html
styles.css
<!DOCTYPE html> body {
background-color: powderblue;
<html> }
<head> h1 {
color: blue;
<link rel="stylesheet" href="styles.css"> }
</head> p{
color: red;
<body> }
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML Links
• HTML links are hyperlinks.
• You can click on a link and jump to another document.
• When you move the mouse over a link, the mouse arrow will turn into
a little hand
HTML Link
• <!DOCTYPE html>
• <html>
• <body>
• <h1>HTML Links</h1>
• <p><a
href="https://www.w3schools.co
m/">Visit
W3Schools.com!</a></p>
• </body>
• </html>
HTML Images
<!DOCTYPE html>
<html>
<body>
<h2>HTML Image</h2>
<img src="pic_trulli.jpg" alt="Trulli"
width="500" height="333">
</body>
</html>
HTML Tables
<table>

<tr> --> Table row --> Each table row starts with a <tr> and ends with
a </tr> tag

<td> --> Table data --> Everything between <td> and </td> are the
content of the table cell.
HTML Tables
<!DOCTYPE html>
<tr>
<html>
<td>Alfreds Futterkiste</td>
<style>
<td>Maria Anders</td>
table, th, td {
<td>Germany</td>
border:1px solid black;
</tr>
}
<tr>
</style>
<td>Centro comercial Moctezuma</td>
<body>
<td>Francisco Chang</td>
<td>Mexico</td>
<h2>A basic HTML table</h2>
</tr>
</table>
<table style="width:100%">
<tr>
<p>To understand the example better, we have added borders
<th>Company</th>
to the table.</p>
<th>Contact</th>
<th>Country</th>
</body>
</tr>
</html>
HTML Tables
HTML Lists
• HTML lists allow web developers to group a set of related items in
lists.
HTML Video
• The HTML <video> element is used to show a video on a web page.
Example 1

<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
Example 2
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
HTML Audio
• The HTML <audio> element is used to play an audio file on a web page.

• The controls attribute adds audio controls, like play, pause, and volume.

• The <source> element allows you to specify alternative audio files which
the browser may choose from.

• The browser will use the first recognized format.

• The text between the <audio> and </audio> tags will only be displayed in
browsers that do not support the <audio> element
Example
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3"
type="audio/mpeg">
Your browser does not support the audio
element.
</audio>
</body>
</html>
HTML Semantic Elements
• Semantic elements = elements with a meaning.

• Examples of non-semantic elements: <div> and <span> - Tells nothing about its
content.

• Examples of semantic elements: <form>, <table>, and <article> - Clearly defines


its content.

• In HTML there are some semantic elements that can be used to define different
parts of a web page:
HTML Semantic Elements
HTML Semantic Elements
1.navigation
• The <nav> element defines a set of navigation links.
<!DOCTYPE html>
<html>
<body>

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>

</body>
</html>
2.aside
<!DOCTYPE html> <p>My family and I visited The Epcot center this summer.</p>
<html> <aside>
<head> <p>The Epcot center is a theme park at Walt Disney World.</p>
<style> </aside>
aside { <p>My family and I visited The Epcot center this summer.</p>
width: 30%; </body>
padding-left: 15px; </html>
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
}
</style>
</head>
<body>
3.figure
<!DOCTYPE html>
<html>
<body>
<h2>Places to Visit</h2>
<p>Puglia's most famous sight is the unique
conical houses (Trulli) found in the area around
Alberobello, a declared UNESCO World Heritage
Site.</p>
<figure>
<img src="pic_trulli.jpg" alt="Trulli"
style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia,
Italy.</figcaption>
</figure>
</body>
</html>
4.footer
<!DOCTYPE html>
<html>
<body>

<footer>
<p>Author: Hege Refsnes</p>
<p><a
href="mailto:[email protected]">[email protected]</a></
p>
</footer>

</body>
</html>
5.section
<!DOCTYPE html>
<html>
<body>
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues
regarding the conservation, research and restoration of the environment, formerly named the
World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated
from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the
same year of the establishment of WWF.</p>
</section>
</body>
</html>
HTML Forms
• An HTML form is used to collect user input. The user input is most often
sent to a server for processing.

• The HTML <form> element is used to create an HTML form for user input

• The <form> element is a container for different types of input elements,


such as: text fields, checkboxes, radio buttons, submit buttons, etc.

• An <input> element can be displayed in many ways, depending on the


type attribute.
input element
• An <input> element can be displayed in many ways, depending on the
type attribute.
• There are mainly five types.
1.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>
<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>
2.The <label> Element
• The <label> tag defines a label for many form elements.

• The <label> element also helps users who have difficulty clicking on
very small regions (such as radio buttons or checkboxes) -

• because when the user clicks the text within the <label> element, it
toggles the radio button/checkbox.

• The for attribute of the <label> tag should be equal to the id attribute
of the <input> element to bind them together.
3.Radio Buttons
• The <input type="radio"> defines a radio button.
• Radio buttons let a user select ONE of a limited number of choices.

<!DOCTYPE html> </body>


<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>
4.Checkboxes
• The <input type="checkbox"> defines a checkbox.
• Checkboxes let a user select ZERO or MORE options of a limited number of choices
<!DOCTYPE html> </form>
</body>
<html> <body> </html>
<h2>Checkboxes</h2>
<p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>
<form action="/action_page.php">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br><br>
<input type="submit" value="Submit">
5.Submit Button
• The <input type="submit"> defines a button for submitting the form
data to a form-handler.

• The form-handler is typically a file on the server with a script for


processing input data.

• The form-handler is specified in the form's action attribute.


<!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>
CSS Multiple Backgrounds
• CSS allows you to add multiple background images for an element,
through the background-image property.

• The different background images are separated by commas, and the


images are stacked on top of each other, where the first image is
closest to the viewer.
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
}
</style>
</head>
<body>
<h1>Multiple Backgrounds</h1>
<p>The following div element has two background images:</p>
<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis .</p>
</div>
</body>
</html>
<!DOCTYPE html> <h1>The background-size Property</h1>
<html> .div3 {
<head> border: 1px solid black; <h2>background-size: contain:</h2>
<style> height: 120px; <div class="div1">
.div1 { width: 150px; <p>Lorem ipsum dolor sit amet.</p>
border: 1px solid black; background: url(img_flwr.gif); </div>
height: 120px; background-repeat: no-repeat;
width: 150px; } <h2>background-size: cover:</h2>
background: url(img_flwr.gif); </style> <div class="div2">
background-repeat: no-repeat; </head> <p>Lorem ipsum dolor sit amet.</p>
background-size: contain; <body> </div>
}
<h2>No background-size defined:</h2>
.div2 { <div class="div3">
border: 1px solid black; <p>Lorem ipsum dolor sit amet.</p>
height: 120px; </div>
width: 150px;
background: url(img_flwr.gif); <p>Original image:</p>
background-repeat: no-repeat; <img src="img_flwr.gif" alt="Flowers"
background-size: cover; width="224" height="162">
}
</body>
</html>
<!DOCTYPE html>
<html>
<p>No background-clip (border-box is default):</p>
<head>
<div id="example1">
<style>
<h2>Lorem Ipsum Dolor</h2>
#example1 {
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
border: 10px dotted black;
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
padding: 35px;
magna aliquam erat volutpat.</p>
background: yellow;
</div>
}
<p>background-clip: padding-box:</p>
#example2 {
<div id="example2">
border: 10px dotted black;
<h2>Lorem Ipsum Dolor</h2>
padding: 35px;
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
background: yellow;
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
background-clip: padding-box;
magna aliquam erat volutpat.</p>
}
</div>
#example3 {
<p>background-clip: content-box:</p>
border: 10px dotted black;
<div id="example3">
padding: 35px;
<h2>Lorem Ipsum Dolor</h2>
background: yellow;
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
background-clip: content-box;
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
}
magna aliquam erat volutpat.</p>
</style>
</div>
</head>
</body>
<body>
</html>
<h1>The background-clip Property</h1>
Borders
• The CSS border-image property allows you to specify an image to be used
instead of the normal border around an element.

• The property has three parts:

1. The image to use as the border


2. Where to slice the image
3. Define whether the middle sections should be repeated or stretched
<!DOCTYPE html>
<html>
<head>
<style>
#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 round;
}
</style>
</head>
<body>

<h1>The border-image Property</h1>


<p>Here, the middle sections of the image are repeated to create the
border:</p>
<p id="borderimg">border-image: url(border.png) 30 round;</p>
<p>Here is the original image:</p><img src="border.png">
<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not
support the border-image property.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 stretch;
}
</style>
</head>
<body>
<h1>The border-image Property</h1>
<p>Here, the middle sections of the image are stretched to create the border:</p>
<p id="borderimg">border-image: url(border.png) 30 stretch;</p>

<p>Here is the original image:</p><img src="border.png">


<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support
the border-image property.</p>

</body>
</html>
<div> tag
• The <div> tag defines a division or a section in an HTML document.

• The <div> tag is used as a container for HTML elements - which is


then styled with CSS or manipulated with JavaScript.

• The <div> tag is easily styled by using the class or id attribute.

• Any sort of content can be put inside the <div> tag!


<!DOCTYPE html>
<html>
<head>
<style>
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>
<h1>The div element</h1>
<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
<p>This is some text outside the div element.</p>
</body>
</html>
Colors
• Colors are specified using predefined color names, or RGB, HEX, HSL,
RGBA, HSLA values.
<!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>
<!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>
<!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>
Shadows
• With CSS you can add shadow to text and to elements.

• In these chapters you will learn about the following properties:

1. text-shadow
2. box-shadow
Text Shadow

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px red;
}
</style>
</head>
<body>

<h1>Text-shadow effect!</h1>

</body>
</html>
Box Shadow

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px;
}
</style>
</head>
<body>

<h1>The box-shadow Property</h1>


<div>This is a div element with a box-shadow</div>

</body>
</html>
Text
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: blue;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is blue.
The default text color for a page is defined in the body
selector.</p>
<p>Another paragraph.</p>

</body>
</html>
Transformations
• CSS transforms allow you to move, rotate, scale, and skew elements.
• transform
div#myDiv {

Transformations
transform: rotate(20deg);
}
<!DOCTYPE html> </style>
<html> </head>
<head> <body>
<style>
div { <h1>The rotate() Method</h1>
width: 300px;
height: 100px; <p>The rotate() method rotates an element clockwise or
background-color: yellow; counter-clockwise.</p>
border: 1px solid black;
} <div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated clockwise 20 degrees.
</div>

</body>
</html>

You might also like