for paragraphs and for links. Attributes provide additional information about elements and are specified in the start tag. Common attributes include href for links and src for images. CSS is used to style and lay out HTML elements on the page.">
HTML&CSS Bells HTML&CSS Bells HTML INTRODUCTION • HTML uses Tags for Annotation, opening Tag < > and Closing Tag </> • But not many of the developers were involved in creating websites. So the language • The most widely used version throughout the 2000's was HTML 4.01, which became For Example <h1>This is a Heading</h1> • Some HTML elements have no content (like the <br> element). These • A browser does not display the HTML tags, but uses them to determine <!DOCTYPE html> <html> </html> • The HTML document itself begins with <html> and ends with </html> • The visible part of the HTML document is between <body> and </body> • It must only appear once, at the top of the page (before any HTML tags). <!DOCTYPE html> • The <head> element contains meta information about the HTML page • The <title> element specifies a title for the HTML page (which is shown in the • The <body> element defines the document's body, and is a container for all <!DOCTYPE html> • <h1> defines the most important heading. <h6> defines the least • Search engines use the headings to index the structure and content of your <!DOCTYPE html> </body> • Note: Browsers automatically add some white space (a margin) before and • Note: Use HTML headings for headings only. Don't use headings to make • Each HTML heading has a default size. However, you can specify the size for Example </body> • The <hr> tag defines a thematic break in an HTML page, and is most often • The <hr> element is used to separate content (or define a change) in an HTML </body> The <br> tag defines a line break, and is an empty element without a closing tag: <!DOCTYPE html> </body> </html> Example • Attributes are always specified in the start tag i.e Links, and images Example _self - Default. Opens the document in the same window/tab as it was clicked Use the href attribute to create a link to any document on your system • The source file (src), alternative text (alt), width, and height are provided as Example • You can modify to control the dimensions and shape of the image • Large or small screens, and resized windows will create different results. • With HTML, you cannot change the display by adding extra spaces or extra • The browser will automatically remove any extra spaces and lines when the <p> • The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves • With CSS, you can control the color, font, the size of text, the spacing • The following example sets the text color of the <h1> element to blue, and the text color of the <p> element to </body> • The following example sets the text color of ALL the <h1> elements (on that <body> </html> • To use an external style sheet, add a link to it in the <head> section of each <body> </html> body { Example <body style="background-color:papayawhip;"> Note:you can also set the rgb properties in place of the colour names <!DOCTYPE html> <body> </html> <!DOCTYPE html> <p>I am normal</p> </body> You can set the color of borders around your html text as follows </body> <!DOCTYPE html> </body> </body> </body> • The HTML <address> tag defines the contact information for the </body> Video Element • autoplay: This attribute specifies that as soon as your web page gets ready, the • width and height: This is used to assign the player's width and height in which • muted: This tells whether the audio part of the specified video should be kept <p> </body> </body> </body> • Add muted after autoplay to let your video start playing automatically (but muted): <!DOCTYPE html> </body> • An easier solution is to let YouTube play the videos in your web page. • YouTube will display an id (like tgbNymZ7vqY), when you save (or play) a video. • You can use this id, and refer to your video in the HTML code by clicking on the src="https://www.youtube.com/embed/tdW0Gv9WDP4?autoplay= • There are three easy methods you can use to center a video rendered • Applying margin: auto 0px and display:block styles to the video element </center> <body> </body> video.center { <body> </body> A favicon could be a brand’s logo, a character or a set of characters, part of the logo, • Note there are other websites where you can create favicons i.e favicon.cc Note However that favicons display is sometimes browser specific, and it may not • Every web page should have a page title to describe the meaning of the page. <body> <style> <body> <tr> <tr> </table> <p>To understand the example better, we have added borders to the table.</p> </body> To avoid having double borders like in the example above, set the CSS border-collapse • If you set a background color of each cell, and give the border a white color <style> <table style="width:100%"> <style> • An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. • An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. • The unordered list items will be marked with bullets (small black circles) by default: • The <dl> tag defines the description list, the <dt> tag defines the term (name), and <body> <ul style="list-style-type:circle;"> </body> <ul style="list-style-type:none;"> </body> </body> <body> li { li a:hover { </head> <ul> </body> </body> • A block-level element always takes up the full width available (stretches out to the left and right as far as it <p>The P and the DIV elements are both block elements, and they will always start on a new line </body> <p>The SPAN element is an inline element, and will not start on a new line and </body> <div style="background-color:black;color:white;padding:20px;"> <p> Nigeria first became a republic in 1963, but succumbed to military rule three years later, after a </body> </body> • <details> - Defines additional details that the user can open and close on demand <ul> ul { li { li a:hover { body { article { /* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each <header> <section> <footer> In HTML there are some semantic elements that can be used to define different parts of a web page: <section> </body> An article should make sense on its own, and it should be possible to distribute it • Forum posts </body> <article class="all-browsers"> </body> <article> </body> • authorship information • <footer> • </body> • Browsers, such as screen readers for disabled users, can use this • <nav> • </body> • The <aside> element defines some content aside from the content it <p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was <aside> </body> • <p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p> • <aside> • <p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p> • </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 • <figure> • </body> The position property specifies the type of positioning method used for an element • static • Elements are then positioned using the top, bottom, left, and right properties. • Static positioned elements are not affected by the top, bottom, left, and right • An element with position: static; is not positioned in any special way; it is always <!DOCTYPE html> </body> • A fixed element does not leave a gap in the page where it would normally have <h2>position: fixed;</h2> <p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place <div class="fixed"> </body> • Note: Absolute positioned elements are removed from the normal flow, <h2>position: absolute;</h2> <p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative </body> ::-webkit-scrollbar-button — the buttons on the scrollbar (arrows pointing upwards and downwards ::-webkit-scrollbar-track — the track (progress bar) of the scrollbar, where there is a gray bar on top ::-webkit-scrollbar-track-piece — the part of the track (progress bar) not covered by the handle. ::-webkit-scrollbar-corner — the bottom corner of the scrollbar, where both horizontal and vertical ::-webkit-resizer — the draggable resizing handle that appears at the bottom corner of some /* Track */ /* Handle */ /* Handle on hover */ <p><strong>Note:</strong> The -webkit-scrollbar is not supported in Firefox or in Edge, prior version 79.</p> <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p> • </body> <div class="dropdown"> • An HTML form is used to collect user input. The user input is most often sent to a server for processing <h2>HTML Forms</h2> <form action="/action_page.php"> <p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p> </body> • The HTML <form> element is used to create an HTML form for user input: <!DOCTYPE html> <p>Also note that the default width of text input fields is 20 characters.</p> </body> • Note: The form itself is not visible. Also note that the default width of an input field is 20 characters. • The <label> element is useful for screen-reader users, because the screen-reader will read • The <label> element also help users who have difficulty clicking on very small regions (such • The for attribute of the <label> tag should be equal to the id attribute of the <input> <h2>Radio Buttons</h2> <form> </body> <h2>Checkboxes</h2> <form action="/action_page.php"> </body> • If the name attribute is omitted, the value of the input field will not be • Some of the popular editors that are best suited to wire CSS code are as When tags like <font>, and color attributes were added to the HTML 3.2 p{ *Note that the style tags are nested within the head tags CSS selectors are used to "find" (or select) the HTML elements you want to Example <body> </html> • To select an element with a specific id, write a hash (#) character, followed by the Example <!DOCTYPE html> <body> </body> Example In this example all HTML elements with class="center" will be red and center- <body> </html> <!DOCTYPE html> Example In this example the <p> element will be styled according to class="center" and to Example This CSS rule will affect every HTML element on the page: <body> </html> • The grouping selector selects all the HTML elements with the same style definitions. <!DOCTYPE html> <body> • When a browser reads a style sheet, it will format the HTML document • Each HTML page must include a reference to the external style sheet file Example <style> </head> <body> <h1>This is a heading</h1> </body> <h1>This is a heading</h1> </body> Note: Do not add a space between the property value and the unit (such • An internal style sheet may be used if one single HTML page has a h1 { <h1>This is a heading</h1> </body> • An inline style may be used to apply a unique style for a single element. *An inline style loses many of the advantages of a style sheet (by mixing </body> </body> <p>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using </body> • An RGB color value represents RED, GREEN, and BLUE light sources. • RGB Value • Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255. • For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and the • To display black, set all color parameters to 0, like this: rgb(0, 0, 0). • To display white, set all color parameters to 255, like this: rgb(255, 255, 255). • RGBA color values are an extension of RGB color values with an alpha • </body> • A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the • HEX Value • #rrggbb • Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255). • For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (00). • <h2 style="background-color:#ff0000;">#ff0000</h2> • </body> • Sometimes you will see a 3-digit hex code in the CSS source. • The 3-digit hex code is a shorthand for some 6-digit hex codes. • #rgb • Where r, g, and b represents the red, green, and blue components with values between 0 and f. • The 3-digit hex code can only be used when both the values (RR, GG, and BB) are the same for • h1 { •p{ • </body> • HSL Value • Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. • Saturation is a percentage value, 0% means a shade of gray, and 100% is the full color. • Lightness is also a percentage, 0% is black, 50% is neither light or dark, 100% is white • </body> • <h1>Hello World!</h1> • </body> • You can set the background color for any HTML elements: • div { • p{ • </body> • div.first { • div.second { • div.third { • <p>When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This • <div class="first"> • <div class="second"> • <div class="third"> • <div> • </body>Uploaded by
Olamide KoleUploaded by
Olamide KoleMODULE 1
• 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 as defined by Semantics
• HTML elements tell the browser how to display the content
Markup Languages
• In computer text processing, a markup language is a system for annotating a
document in a way that is visually distinguishable from the content• It is used only to format texts, so that when a document is processed for
display, the markup language does not appear.• Examples of Markup Languages are HTML, XML, LateX, XHTML
History
• The first version of HTML was written by Tim Berners-Lee in 1993. HTML 1.0 was
released with the intention of sharing information that can be readable and accessible
via web browsers.
was also not growing.• Since then, there have been many different versions of HTML.
an official standard in December 1999.• Presently HTML 5 is in use
HTML Editors
• A simple text editor is all you need to learn HTML. (Note Pad)• However there are specialized code editors both free and
paid in the market today and they help you complete your
codes faster and readily indicate errors in your code• Examples are Notepad++, Komodo edit, Bluefish, Atom, Text
Mate, Visual Studio Code e.t.c
HTML Elements
• The HTML element is everything from the start tag to the end tag<tagname> Content goes here...</tagname>
<p>This is a paragraph</p>
Attributes
• HTML tags are not case sensitive: <P> means the same as <p>.• However as a matter of convention it is better to write in lower cases
elements are called empty elements.• Empty elements do not need an end tag!
HTML TAGS FUNCTIONS<p> I like to build websites </p> Defines a paragraph
<a> I like to build websites </a> Defines a hyperlink
<b> I like to build websites </b> Defines bold text
<h1> I like to build websites<h1> Defines a heading
Web Browsers• The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read
HTML documents and display them correctly.
how to display the document:
HTML SyntaxAll Html documents generally follow the syntax displayed below:
<head> <title> </title> </head>
<body> I enjoy web design </body>
HTML Page Structure
Below is a visualization of an HTML page structure:
HTML Documents
• All HTML documents must start with a document type declaration: <!
DOCTYPE html>
The <!DOCTYPE> Declaration
• The <!DOCTYPE> declaration represents the document type, and helps
browsers to display web pages correctly.• The <!DOCTYPE> declaration is not case sensitive.
• The <!DOCTYPE> declaration for HTML5 is:
• The <html> element is the root element of an HTML page• The <html> element represents the root (top-level element) of an HTML
document, so it is also referred to as the root element. All other elements
must be descendants of this element.
browser's title bar or in the page's tab)
the visible contents, such as headings, paragraphs, images, hyperlinks, tables,
lists, etc.
Nested HTML Elements
• HTML elements can be nested (this means that elements can contain other elements).• All HTML documents consist of nested HTML elements.
• The following example contains four HTML elements
(<html>, <body>, <h1> and <p>)
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Headings
• HTML headings are defined with the <h1> to <h6> tags.
important heading:
web pages.• Users often browse a page by its headings. It is important to use headings
to show the document structure.
Web Page Headings Class Exercise
<html>
<body><h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</html>
Headings Continued• <h1> headings should be used for main headings, followed by <h2>
headings, then the less important <h3>, and so on.
after a heading.
text BIG or bold.
Bigger Headings
any heading with the style attribute, using the CSS font-size property:<h1 style="font-size:60px;">Heading 1</h1>
<!DOCTYPE html>
<html>
<body><h1 style="font-size:60px;">Heading 1</h1>
</html>
HTML Horizontal Rules
displayed as a horizontal rule.
page:
<!DOCTYPE html>
<html>
<body>
<hr>this part of my text <hr>Was separated <hr> from this other text
</html>
Empty HTML Elements
• HTML elements with no content are called empty elements.
<html>
<body><p>This is my <br> paragraph with a line break.</p>
HTML Paragraphs
• HTML paragraphs are defined with the <p> tag:
• <p>This is a paragraph.</p>
• <p>This is another paragraph.</p>
HTML Attributes
• All HTML elements can have attributes• Attributes provide additional information about elements and can be used to
define their appearance• Attributes usually come in name/value pairs like: name="value"
HTML Links• HTML links are defined with the <a> tag:
<a href="url">link text</a>
<a href="https://www.google.com">This is a link</a>Href stands for Hypertext Reference
Html LinksBy default, links will appear as follows in all browsers:
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red
HTML Links - The target Attribute
By default, the linked page will be displayed in the current browser window. To
change this, you must specify another target for the link.The target attribute can have one of the following values:
_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.google.com/" target="_blank"> visit Google</a><a href="C:\Users\BANKS\Desktop\New folder (2)\nn.txt"
target="_blank">Doc Name</a>
The href Attribute
• The <a> tag defines a hyperlink. The href attribute specifies the URL of the
page the link goes to:<a href="C:\Users\NHS_TU 02\Desktop\class\">Doc Name</a>
Exercise
The href AttributeUse the href attribute to create a link to any website
MODULE 2
HTML Attributes, src for ImagesHTML images are defined with the <img> tag.
attributes:
<img src="image-url.jpg" alt="description of the image"><img src= "directory.jpg" alt="This is my Image" width="104" height="142">
The width and height Attributes
• The <img> tag should also contain the width and height attributes, which
specifies the width and height of the image (in pixels):<img src= "directory.jpg" alt= "This is my Image" width="104" height="142">
HTML Display
lines in your HTML code.
page is displayed:
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
This paragraph contains a lot of spaces in the source
code but the browser ignores it
</p>
</body>
The HTML <pre> Element
• The HTML <pre> element defines preformatted text.
both spaces and line breaks:
Example
<pre>
My first Poem reads. I was not happy with the rain.
until my eyes caught .
a mysterious autumn watercolor gift.
</pre>
Html CSS
• Cascading Style Sheets (CSS) is used to format the layout of a webpage.
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 can be added to HTML documents in 3 ways:• 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
Inline CSS• An inline CSS is used to apply a unique style to a single HTML element.
• An inline CSS uses the style attribute of an HTML element.
red:
<!DOCTYPE html>
<html>
<body><h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
</html>
Internal CSS
• An internal CSS is used to define a style for a single HTML page.• An internal CSS is defined in the <head> section of an HTML page, within a
<style> element.
page) to blue, and the text color of ALL the <p> elements to red.• In addition, the page will be displayed with a "powderblue" background
color:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
External CSS
• An external style sheet is used to define the style for many HTML pages.
HTML page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
"styles.css":The external style sheet can be written in any text editor. The file must not contain any
HTML code, and must be saved with a .css extension
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}
The style Attribute (CSS)
• The style attribute is used to add styles to an element, such as color, font, size,
and more.
<p>I am normal</p>
<p style="color:red;">I am colored red</p>
<p style="color:blue;">I am colored blue</p>
<p style="font-size:50px;">I am big</p>
Background Color• The CSS background-color property defines the background color for
an HTML element.
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
i.e <body style="background-color:rgb(255, 99, 71);">
Set background color for different elements:
<html>
<h1 style="background-color:grey;">This is a heading</h1>
<p style="background-color:powderblue;">This is a paragraph.</p>
</body>
HTML Styles Text colours
<html>
<body>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="MediumSeaGreen;">I am green</p>
</html>
Border Color
<!DOCTYPE html>
<html>
<body><h1 style="border: 2px solid Tomato;">This Text border</h1>
<h1 style="border: 1px solid DodgerBlue;">Is colored differently </h1>
<h1 style="border: 2px solid Violet;">from this </h1>
</html>
Fonts
The CSS font-family property defines the font to be used for an HTML element:
<html>
<body> <h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
</html>
Text Size
The CSS font-size property defines the text size for an HTML
element
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p
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:right;">Right Aligned paragraph.</p>
</html>
HTML Text Formatting Elements
Bold Italics Subscripts and superscripts
<!DOCTYPE html>
<html>
<body><p><b>This text is bold</b></p>
<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</html>
Emphasis, Marks, Text reduction, Deletion, Quotation
<body>
<p>This text is normal.</p>
<p><em>This text is emphasized.</em></p>
<p>This is some normal text.</p>
<p>Its Friyay! don’t forget to have <mark>fun!</mark> today.</p>
<p><small>This is some smaller text.</small></p>
<p>My favorite color is <del>red</del> blue.</p>
<p>It is often said that : <q>Whatever the mind can conceive and believe, it can
also achieve.</q></p>
<p>The <abbr title="The Bells University">TBU</abbr> was founded in 2004.</p>
</body>
</html>
HTML ADDRESS TAG
author/owner of a document or an article.• The contact information can be an email address, URL, physical address,
phone number, social media handle, etc.
•
The text in the <address> element usually renders in italic, and browsers will
always add a line break before and after the <address> element
<!DOCTYPE html>
<html>
<body>
<p>The HTML address element defines contact information (author/owner) of a
document or article.</p>
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
</body>
</html>
Html Comments
<!DOCTYPE html>
<html>
<body><!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->
</html>
MODULE 3
HTML Marqee Tag
• Marquee is one of the important tags introduced in HTML to support
such scrollable texts and images within a web page.<marquee width="60%" direction="right" height="100px vspace =
30%">
This is a sample scrolling text that scrolls to the right.
</marquee>
Marquee Speed
• Marquee speed can be changed using the "scrollmount" attribute. For example,
if you are using scrollmount = "1" then it sets the marque to scroll very slowly,
and as you increase the "scrollmount," the scrolling speed will also increase<marquee behavior="scroll" direction="up" scrollamount="1">Slow
Scrolling</marquee>
<marquee behavior="scroll" direction="right" scrollamount="12">Little Fast
Scrolling</marquee>
<marquee behavior="scroll" direction="left" scrollamount="20">Fast
Scrolling</marquee>
<marquee behavior="scroll" direction="right" scrollamount="50">Very Fast
Scrolling</marquee>
Continuous scrolling image
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<marquee behavior="scroll" direction="left">
<img src= ".jpg " width="120" height="80" alt= " Text here" />
</marquee>
</body>
</html>
Side Touch Margin Bounce Image
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<marquee behavior="alternate" direction="left"scrollamount="70">
<img src="me.jpg"
width="120" height="80" alt= " none" />
</marquee>
</body>
</html>
Embedding Videos
• Embedding videos in HTML based document is also an essential part of web
development. Most browsers do not have any consistent standard to define
media files that are embedded in web pages.
• This is a new feature introduced in HTML for embedding video and is used to
incorporate movie files and video streaming, and is done using the <video>
tag, which supports three video formats currently. These are:
• MP4
• Ogg and
• WebM
Video Tag Attributes
• src: This is used to set the URL or path from where the video file will get fetched.
video embedded in your page gets played at that moment.• controls: This tells the browser what player-controls / buttons (such as
play/pause, etc.) to be displayed on the page with the video.
the video will be shown.
mute or not.
<!DOCTYPE html>
<html>
<body><video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
</video>
My WebPage Video
</p>
</html>
<!DOCTYPE html>
<html>
<body><video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
</html>
• The controls attribute adds video controls, like play, pause, and
volume.• It is a good idea to always include width and height attributes. If
height and width are not set, the page might flicker while the video
loads.• The <source> element allows you to specify alternative video files
which the browser may choose from. The browser will use the first
recognized format.
HTML <video> Autoplay
• To start a video automatically, use the autoplay attribute:
<!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>
</html>
Muted Autoplay
<html>
<body><video width="320" height="240" autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</html>
YouTube videos• Converting videos to different formats can be difficult and time-consuming.
share and embed button and copying the corresponding code
<!DOCTYPE html>
<html>
<body><iframe width="560" height="315"
src="https://www.youtube.com/embed/tdW0Gv9WDP4" title="YouTube video
player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
</iframe>
</body>
</html>
To autoplay and mute <iframe width="560" height="315"
1&mute=1" title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share allowfullscreen "></iframe>
YouTube - Loop<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?
playlist=tgbNymZ7vqY&loop=1">
</iframe>
Positioning Media
inside your HTML document.• Using the <center> HTML tag
• Adding a <div> container to the video element with text-align:center style
itself
<center><video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.mp4" type="video/ogg">
</video>
Center a video using div tag and text-align:center property
<style>
div.center {
text-align: center;
}
</style>
<div class="center">
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
</video>
</div>
Centering the video element with margin and display style
<style>
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<video class="center" controls>
<source src="mov_bbb.mp4" type="video/mp4"> </video>
Favicons
Favicons are icons that are used as part of a site’s branding.
or even a generic image that represents the type of business or industry a brand is in.Typically favicons are found near the address bar
To Create a Favicon
• Go to genfavicon.com
• Upload the image to use for your favicon
• Change the size to 16x16
• Capture and preview
• Download icon image
Favicon Syntax
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href="favicon" />
</head>
<body>
</body>
</html>
display on your local Microsoft Edge browsers during web development but will display
on google chrome and when viewed from the live Server.
Google Chrome is responsive to favicon display (clear cache)
• Favicons can also be jpg files altered to the right dimensions<link rel="shortcut icon" type="image/jpg" href="arrow.jpg"/>
HTML Page Title
The <title> element adds a title to your page:
<!DOCTYPE html>
<html>
<head>
<title>My Own WebPage</title>
</head>
<body>
The content of the document......
</body>
</html>
HTML <button> TagA clickable button is marked up as follows:
<body>
<button type="button">Click Me!</button>
</body>To give it some functionality we can write
<button type="button" onclick="alert('Hello world!')">Click Me!</button>
</body>
MODULE 4
Html Tables
• Tables allow web developers to arrange data into rows and columns
• Tables typically consists of cells inside rows and column
• The content of every table is enclosed with the table tags : <table></table>
• The smallest container inside a table is a table cell, each table cell is defined by
a <td> and a </td> tag. Td Stands for Table data
• Each table row starts with a <tr> and ends with a </tr> tag.
• tr stands for table row.
• Sometimes you want your cells to be headers, in those cases use the <th> tag
instead of the <td> tag:
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<h2>TR elements define table rows</h2>
<table style="width:100%">
<tr>
<td>Helen</td>
<td>Tobias</td>
<td>Luke</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
<p>To understand the example better, we have added borders to the table.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<h2>TD elements define table cells</h2>
<table style="width:100%">
<tr>
<td>JOHN</td>
<td>OBI</td>
<td>AHMED</td>
</tr>
</table>
<p>To understand the example better, we have added borders to the table.</p>
</body>
</html>
<!DOCTYPE html>
<html>
table, th, td {
border:2px solid black;
}</style>
<h2>A basic HTML table</h2>
<table style="width:30%">
<th>Country</th>
<th>Matches Played</th>
<th>Matches won </th>
<th>Matches lost</th>
</tr>
<tr>
<td>Nigeria</td>
<td>20</td>
<td>18</td>
<td>2</td>
</tr>
<td>Cameroon</td>
<td>20</td>
<td>10</td>
<td>10</td>
</tr>
</html>
C olla ps e d T ab le Bo rde rs
property to collapse.This will make the borders collapse into a single border:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
Style Table Borders
(the same as the document background), you get the impression of an
invisible border:
<style>
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
</style>
Round Table Borders• With the border-radius property, the borders get rounded corners:
<style>
table, th, td {
border: 1px solid black;
border-radius: 10px;
}
</style>
Skip the border around the table by leaving out table from the css selector:
th, td {
border: 1px solid black;
border-radius: 10px;
}
</style>
Dotted Border
<style>
th, td {
border-style: dotted;
}
</style>
The Following Border Styles can be used
• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset
• none
• hidden
Border Colour Property
<style>
th, td {
border-style:solid;
border-color: #96D4D4;
}
</style>
To set the size of a specific column, add the style attribute on a <th> or <td> element:
<style>
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
</style>
<body><h2>Set the first column to 70% of the table width</h2>
<tr>
<th style="width:70%">Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
HTML Table Row Height
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
</style>
<body>
<h2>Set the height of the second row to 200 pixels</h2>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr style="height:200px">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
HTML Lists
• HTML lists allow web developers to group a set of related items in lists.• The list items will be marked with numbers by default
• HTML also supports description lists.
• A description list is a list of terms, with a description of each term.
the <dd> tag describes each term:
Ordered and unordered lists
<body>
<h2>An Unordered HTML List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An Ordered HTML List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
Unordered List with Circle Bullets<h2>Unordered List with Circle Bullets</h2>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Unordered List without Bullets
<body> <h2>Unordered List without Bullets</h2>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Description lists
<body><h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Nested HTML Lists: Lists can be nested (list inside 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>
</body>
Horizontal List with CSS
• HTML lists can be styled in many different ways with CSS.• One popular way is to style a list horizontally, to create a navigation menu:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
background-color: #111111;
}
</style>
<body>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
Linking Html Pages
<!DOCTYPE html>
<head>
<title>First Page</title>
<style>
body{ background-color:aqua}
</style>
</head>
<body> <h1>This is the first page</h1>
<a href="testpg2.html">Click me to link page 2</a>
</body>
</html>
<!DOCTYPE html>
<head>
<title>Second page</title>
<style>
body { background-color: chartreuse}
</style>
</head>
<body>
<h2>This is the second page</h2> <a href="pg1.html">Click me to return to page 1</a>
</html>
MODULE 5
Block-level Elements
• A block-level element always starts on a new line, and the browsers automatically add some space (a margin)
before and after the element.
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>
and take up the full width available (stretches out to the left and right as far as it can).</p>
</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>
only takes up as much width as necessary.</p>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Nigeria</h2>
<p>Nigeria became a British protectorate in 1901. The period of British rule lasted until 1960, when
an independence movement led to the country being granted independence.</p>
<p>Nigeria first became a republic in 1963, but succumbed to military rule three years later, after a
bloody coup d'état.</p>
</div>
bloody coup d'état </p>
</html>
In-line <span> element
<!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>
</html>
HTML Layout Elements and Techniques• Websites often display content in multiple columns (like a magazine or a
newspaper).
• HTML has several semantic elements that define the different parts of a
web page:
• <header> - Defines a header for a document or a section• <nav> - Defines a set of navigation links
• <section> - Defines a section in a document
• <article> - Defines an independent, self-contained content
• <aside> - Defines content aside from the content (like a sidebar)
• <footer> - Defines a footer for a document or a section
• <summary> - Defines a heading for the <details> element
<body>
<header>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</header>
</body>
<style>
body{ background-color:aqua}
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
background-color: #111111;
}
</style>
<style>
*{
box-sizing: border-box;
}
font-family: Arial, Helvetica, sans-serif;
}/* Style the header */
header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}/* Create two columns/boxes that floats next to each other */
nav {
float: left;
width: 30%;
height: 300px; /* only for demonstration, should be removed */
background: #ccc;
/* Style the list inside the menu */
nav ul {
list-style-type: none;
padding: 0;
}
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px; /* only for demonstration, should be removed */
}/* Clear floats after the columns */
section::after {
content: "";
display: table;
clear: both;
}
/* Style the footer */
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}
other, on small screens */
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
<body>
<h2>CSS Layout Float</h2>
<p>In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will
stack on top of each other.</p>
<p>Resize the browser window to see the responsive effect</p>
<h2>Cities</h2>
</header>
<nav>
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</nav>
<article>
<h1>London</h1>
<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>
</article>
</section>
<p>Footer</p>
</footer>
</body>
</html>
<section> Element
The <section> element defines a section in a document.
<!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>
<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>
</html>
HTML <article> Element
The <article> element specifies independent, self-contained content.
independently from the rest of the web site.Examples of where the <article> element can be used:
• Blog posts
• User comments
• Product cards
• Newspaper articles
<!DOCTYPE html>
<html>
<body>
<h1>The article element</h1>
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser
today!</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since
January, 2018.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.all-browsers {
margin: 0;
padding: 5px;
background-color: lightgray;
}
.all-browsers > h1, .browser {
margin: 10px;
padding: 5px;
}
.browser {
background: white;
}
.browser > h2, p {
margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>
<h1>Most Popular Browsers</h1>
<article class="browser">
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
</article>
</html>
HTML <header> Element• The <header> element represents a container for introductory content or a set of
navigational links.• A <header> element typically contains:
• one or more heading elements (<h1> - <h6>)
• logo or icon
• authorship information
• Note: You can have several <header> elements in one HTML document. However,
<header> cannot be placed within a <footer>, <address> or another <header>
element.
<!DOCTYPE html>
<html>
<body>
<header>
<h1>What Does WWF Do?</h1>
<p>WWF's mission:</p>
</header>
<p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in
harmony with nature.</p>
</article>
</html>
HTML <footer> Element• The <footer> element defines a footer for a document or section.
• A <footer> element typically contains:
• copyright information
• contact information
• sitemap
• back to top links
• related documents
• You can have several <footer> elements in one document.
• <!DOCTYPE html>
• <html>
• <body>
• <p>Author: Hege Refsnes</p>
• <p><a href="mailto:hege@example.com">hege@example.com</a></p>
• </footer>
• </html>
HTML <nav> Element• The <nav> element defines a set of navigation links.
• Notice that NOT all links of a document should be inside a <nav>
element. The <nav> element is intended only for major block of
navigation links.
element to determine whether to omit the initial rendering of this
content.
• <!DOCTYPE html>
• <html>
• <body>
• <a href="/html/">HTML</a> |
• <a href="/css/">CSS</a> |
• <a href="/js/">JavaScript</a> |
• <a href="/jquery/">jQuery</a>
• </nav>
• </html>
HTML <aside> Element
is placed in (like a sidebar).• The <aside> content should be indirectly related to the surrounding
content.
<!DOCTYPE html>
<html>
<body>
amazing! I had a great summer together with my family!</p>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions,
international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>
</html>
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• aside {
• width: 30%;
• padding-left: 15px;
• margin-left: 15px;
• float: right;
• font-style: italic;
• background-color: lightgray;
•}
• </style>
• </head>
• <body>
• <p>The Epcot center is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
• </aside>
• <p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
• </html>
HTML <figure> and <figcaption> Elements• The <figure> tag specifies self-contained content, like illustrations,
diagrams, photos, code listings, etc.• The <figcaption> tag defines a caption for a <figure> element. The
<figcaption> element can be placed as the first or as the last child of a
<figure> element.• The <img> element defines the actual image/illustration.
• <!DOCTYPE html>
• <html>
• <body>
Heritage Site.</p>
• <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
• <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
• </figure>
• </html>
CSS Layout - The position Property
(static, relative, fixed, absolute or sticky).
The position Property
The position property specifies the type of positioning method used for an element.There are five different position values:
• relative
• fixed
• absolute
• sticky
position: static;
However, these properties will not work unless the position property is set first.
They also work differently depending on the position value.• HTML elements are positioned static by default.
properties.
positioned according to the normal flow of the page:
This <div> element has position: static;
<html>
<head>
<style>
div.static {position: static; border: 3px solid #73AD21;}
</style>
</head>
<body>
<h2>position: static;</h2>
<p>An element with position: static; is not positioned in any special way; it is always positioned according to the
normal flow of the page:</p>
<div class="static">
This div element has position: static;
</div>
</body>
</html>
position: relative;• An element with position: relative; is positioned relative to its normal
position.• Setting the top, right, bottom, and left properties of a relatively-
positioned element will cause it to be adjusted away from its normal
position. Other content will not be adjusted to fit into any gap left by
the element.• This <div> element has position: relative;
<!DOCTYPE html>
<html>
<head>
<style>
div.relative {position: relative; left: 30px;border: 3px solid #73AD21;}
</style>
</head>
<body>
<h2>position: relative;</h2>
<p>An element with position: relative; is positioned relative to its normal position:</p>
<div class="relative">
This div element has position: relative;
</div>
</html>
position: fixed;• An element with position: fixed; is positioned relative to the viewport, which
means it always stays in the same place even if the page is scrolled. The top,
right, bottom, and left properties are used to position the element.
been located.
<!DOCTYPE html>
<html>
<head>
<style>
div.fixed {position: fixed;bottom: 0; right: 0; width: 300px; border: 3px solid #73AD21;}
</style>
</head>
<body>
even if the page is scrolled:</p>
This div element has position: fixed;
</div>
</html>
position: absolute;• An element with position: absolute; is positioned relative to the nearest
positioned ancestor (instead of positioned relative to the viewport, like
fixed).• However; if an absolute positioned element has no positioned
ancestors, it uses the document body, and moves along with page
scrolling.
and can overlap elements.
<!DOCTYPE html>
<html>
<head>
<style>
div.relative {position: relative; width: 400px;height: 200px;border: 3px solid #73AD21;}
div.absolute {position: absolute;top: 80px;right: 0;width: 200px;height: 100px;border: 3px solid #73AD21;}
</style>
</head>
<body>
to the viewport, like fixed):</p><div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>
</html>
position: sticky;• An element with position: sticky; is positioned based on the user's
scroll position.• A sticky element toggles between relative and fixed, depending on
the scroll position. It is positioned relative until a given offset position
is met in the viewport - then it "sticks" in place (like position:fixed).
<style>
div.sticky { position: -webkit-sticky; position: sticky; top: 0;padding: 5px;background-color: #cae8ca; border: 2px solid
#4CAF50;}
</style>
</head>
<body>
<p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p>
<div class="sticky">I am sticky!</div>
<div style="padding-bottom:2000px">
<p>In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.</p>
<p>Scroll back up to remove the stickyness.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut
quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut
quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
molestiae voluptatibus.</p>
</div>
</body>
</html>
HTML SCROLL BARS
::-webkit-scrollbar — the entire scrollbar.
that scroll one line at a time).::-webkit-scrollbar-thumb — the draggable scrolling handle.
of a white bar.
scrollbars meet This is often the bottom-right corner of the browser window.
elements.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* width */
::-webkit-scrollbar { width: 10px;}
::-webkit-scrollbar-track {background: #f1f1f1; }
::-webkit-scrollbar-thumb {background: #888; }
::-webkit-scrollbar-thumb:hover { background: #555; }
</style>
</head>
<body><h2>Custom Scrollbar Example</h2>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
<p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum </p>
• </html>
Dropdown• A dropdown menu is a toggleable menu that allows the user to
choose one value from a predefined list:
<style>
.dropbtn { background-color: #0415aa; color: white; padding: 16px; font-
size: 16px; border: none; }
.dropdown { position: relative; display: inline-block; }
.dropdown-content { display: none; position: absolute; background-color:
#f1f1f1;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index:
1;}
.dropdown-content a { color: black; padding: 12px 16px;
text-decoration: none; display: block; }
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #8e5b3e;}
</style>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</body>
Forms
<!DOCTYPE html>
<html>
<body>
<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>
</html>
The <form> Element
• The <form> element is a container for different types of input elements, such
as: text fields, checkboxes, radio buttons, submit buttons, etc.
• The <input> Element
• The HTML <input> element is the most used form element.• An <input> element can be displayed in many ways, depending on the type
attribute.
Text Fields The <input type="text"> defines a single-line input field for text input.
<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>
</html>
<!DOCTYPE html>
<html>
<body>
<head>
<title>HTML Forms</title>
</head>
<p>Add your details:</p>
<form>
Student Name:<br> <input type="text" name="name">
<br>
Student Subject:<br> <input type="text" name="subject">
<br>
Rank:<br> <input type="text" name="rank">
</form>
</body>
</html>
The <label> Element• The <label> tag defines a label for many form elements.
out loud the label when the user focus on the input element.
as radio buttons or checkboxes) - because when the user clicks the text within the <label>
element, it toggles the radio button/checkbox.
element to bind them together.
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>
<html>
<body><p>Choose your favorite Web language:</p>
<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>
</html>
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>
<html>
<body>
<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>
<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">
</form>
</html>
The 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>
The Name Attribute for <input>• Notice that each input field must have a name attribute to be
submitted.
sent at all.
<!DOCTYPE html>
<html>
<body><h2>The name Attribute</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" value="John"><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>
<p>Notice that the value of the "First name" field will not be submitted, because the input
element does not have a name attribute.</p>
</body>
</html>
CSS INTRODUCTION
• CSS stands for Cascading Style Sheets. It is the language for describing the
presentation of Web pages, including colors, layout, and fonts, thus
making our web pages presentable to the users.• CSS is designed to make style sheets for the web. It is independent of
HTML and can be used with any XML-based markup language.
• CSS can also be used to style HTML documents.
• CSS can describe how HTML elements should be displayed
• CSS saves a lot of work. It can control the layout of multiple web pages all
at once
CSS History
• 1994: First Proposed by Hakon Wium Lie on 10th October
• 1996: CSS was published on 17th November with influencer Bert Bos
• Later he became co-author of CSS
• 1996: CSS became official with CSS was published in December
• 1997: Created CSS level 2 on 4th November
• 1998: Published on 12th May
CSS Editors
following:
• Atom
• Visual Studio Code
• Brackets
• Espresso(For Mac OS User)
• Notepad++(Great for HTML & CSS)
• Komodo Edit (Simple)
• Sublime Text (Best Editor)
css
HTML was NEVER intended to contain tags for formatting a web page!
HTML was created to describe the content of a web page, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
specification, it started a nightmare for web developers.Development of large websites, where fonts and color information
were added to every single page, became a long and expensive process.
CSS Syntax• A CSS rule consists of a selector and a declaration block.
• The selector points to the HTML element you want to style.
• The declaration block contains one or more declarations separated by
semicolons. • Each declaration includes a CSS property name and a value, separated by a
colon.
• Multiple CSS declarations are separated with semicolons, and declaration blocks
are surrounded by curly braces.
CSS
• In this example all <p> elements will be center-aligned, with a red text color:
color: red;
text-align: center;
}
CSS Comments
• Comments are used to explain the code, and may help when you edit the
source code at a later date.
• Comments are ignored by browsers• A CSS comment starts with /* and ends with */.
• Comments can also span multiple lines:
CSS Selectors
style.
We can divide CSS selectors into five categories:• Simple selectors (select elements based on name, id, class)
• Combinator selectors (select elements based on a specific relationship
between them)
• Pseudo-class selectors (select elements based on a certain state)
• Pseudo-elements selectors (select and style a part of an element)
• Attribute selectors (select elements based on an attribute or attribute value)
The CSS element Selector
• The element selector selects HTML elements based on the element name.p { text-align: center; color: red;}
Here, all <p> elements on the page will be center-aligned, with a red text color:
CSS Element Selector
<!DOCTYPE html>
<html>
<head>
<style>
p {text-align: center; color: red;}
</style>
</head>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
The CSS Id Selector• The id selector uses the id attribute of an HTML element to select a specific
element.• The id of an element is unique within a page, so the id selector is used to select
one unique element!
id of the element.
• The CSS rule below will be applied to the HTML element with id="para1":
#para1 {text-align: center; color: blue;}
*NB An Id name cannot start with a number
CSS ID Selector
<html>
<head>
<style>
#para1 {text-align: center; color: blue;}
</style>
</head><p id="para1">Hello, I was styled with css!</p>
<p>This paragraph is not affected by the style.</p>
</html>
The CSS class Selector
• The class selector selects HTML elements with a specific class attribute.
• To select elements with a specific class, write a period (.) character, followed
by the class name.
.center {text-align: center; color: red;}
aligned:
<!DOCTYPE html>
<html>
<head>
<style>
.center {text-align: center; color: red;}
</style>
</head>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
The CSS class Selector
You can also specify that only specific HTML elements should be affected by a
class.
Example
p.center {text-align: center; color: red;}In this example only <p> elements with class="center" will be center-aligned:
The CSS class Selector
<html>
<head>
<style>
p.center {text-align: center; color: red;}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>
• HTML elements can also refer to more than one class.
<p class="center large">This paragraph refers to two classes.</p>
class="large":*A class name cannot start with a number!
<!DOCTYPE html>
<html>
<head>
<style>
p.center {text-align: center; color: red;}
p.large {font-size: 300%;}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-
size.</p>
</body>
</html>
The CSS Universal Selector
• The universal selector (*) selects all HTML elements on the page.
* {text-align: center; color: blue;}
CSS Universal Selector
<!DOCTYPE html>
<html>
<head>
<style>
* { text-align: center; color: blue;}
</style>
</head>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
The CSS Grouping Selector
• In the following CSS code (the h1, h2, and p elements have the same style definitions):h1 {text-align: center; color: red;}
h2 { text-align: center; color: red;}
p {text-align: center; color: red;}It will be better to group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.
h1, h2, p {text-align: center; color: red;}
CSS Grouping Selector
<html>
<head>
<style>
h1, h2, p { text-align: center; color: red;}
</style>
</head>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
How To Add CSS
according to the information in the style sheet.There are three ways of inserting a style sheet:
• External CSS
• Internal CSS
• Inline CSS
External CSS
• With an external style sheet, you can change the look of an entire website
by changing just one file!
inside the <link> element, inside the head section.
External styles are defined within the <link> element, inside the <head>
section of an HTML page:
<!DOCTYPE html>
<html>
<head>
body{background-color: lightblue;}
h1 {color: navy;margin-left: 20px;}
</style>
<p>This is a paragraph.</p>
</html>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<p>This is a paragraph.</p>
</html>
External CSS
• An external style sheet can be written in any text editor, and must be
saved with a .css extension.
The external .css file should not contain any HTML tags.Here is the "mystyle.css" file :
body { background-color: lightblue;}
h1 {color: navy;margin-left: 20px;}
as margin-left: 20 px;). The correct way is: margin-left: 20px;
• href points to the location of the external style sheet
• rel must be set to "stylesheet" for linking style sheets
• type must be set to "text/css" for linking to cascading style sheets
Internal CSS
unique style.
• The internal style is defined inside the <style> element, inside the
head section.
Internal styles are defined within the <style> element, inside the <head> section of an HTML page:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
</html>
Inline CSS
• To use inline styles, add the style attribute to the relevant element. The
style attribute can contain any CSS property.
content with presentation). Use this method sparingly.
Multiple Style Sheets
If some properties have been defined for the same selector (element) in different
style sheets, the value from the last read style sheet will be used.
Assume that an external style sheet has the following style for the <h1> element:
h1 {
color: navy;
}
Then, assume that an internal style sheet also has the following style for the <h1>
element:
h1 {
color: orange;
}
Example
If the internal style is defined after the link to the external style sheet,
the <h1> elements will be "orange":
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
Example
If the internal style is defined after the link to the external style sheet,
the <h1> elements will be "orange":
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
CSS Colors
• Colors are specified using predefined color names, or RGB, HEX, HSL,
RGBA (Red-green-blue-alpha), HSLA (Hue-saturation-lightness-alpha )
• CSS/HTML support 140 standard color names.
<!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>
CSS Background Color• You can set the background color for HTML elements:
<!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>
</html>
CSS Text Color• You can set the color of text:
<!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>
</html>
CSS Border Color
• You can set the color of borders:
<!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>
CSS Color Values
• In CSS, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA 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>
RGBA or HSLA color values.</p>
</html>
CSS RGB Colors
• In CSS, a color can be specified as an RGB value, using this formula:• rgb(red, green, blue)
others are set to 0.
<!DOCTYPE html>
<html>
<body>
<h1>Specify colors using RGB values</h1>
<h2 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h2>
<h2 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h2>
<h2 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h2>
<h2 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h2>
<h2 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h2>
<h2 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h2>
</body>
</html>
RGBA Value
channel - which specifies the opacity for a color.• An RGBA color value is specified with:
• rgba(red, green, blue, alpha)
• The alpha parameter is a number between 0.0 (fully transparent) and
1.0 (not transparent at all):
• <!DOCTYPE html>
• <html>
• <body>• <h1>Make transparent colors with RGBA</h1>
• <h2 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h2>
• <h2 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h2>
• <h2 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h2>
• <h2 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h2>
• <h2 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h2>
• <h2 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h2>
• </html>
CSS HEX Colors
components of the color.
• In CSS, a color can be specified using a hexadecimal value in the form:• To display black, set all values to 00, like this: #000000.
• To display white, set all values to ff, like this: #ffffff.
• <!DOCTYPE html>
• <html>
• <body>• <h1>Specify colors using HEX values</h1>
• <h2 style="background-color:#0000ff;">#0000ff</h2>
• <h2 style="background-color:#3cb371;">#3cb371</h2>
• <h2 style="background-color:#ee82ee;">#ee82ee</h2>
• <h2 style="background-color:#ffa500;">#ffa500</h2>
• <h2 style="background-color:#6a5acd;">#6a5acd</h2>
• </html>
3 Digit HEX Value• The 3-digit hex code has the following form:
each components. So, if we have #ff00cc, it can be written like this: #f0c.
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• body {
• background-color: #fc9; /* same as #ffcc99 */
•}
• color: #f0f; /* same as #ff00ff */
•}
• color: #b58; /* same as #bb5588 */
•}
• </style>
• </head>
• <body>• <h1>CSS 3-digit Hex Code</h1>
• <p>This is a paragraph.</p>
• </html>
CSS HSL Colors• HSL stands for hue, saturation, and lightness.
• In CSS, a color can be specified using hue, saturation, and lightness (HSL) in the form:• hsl(hue, saturation, lightness)
• <!DOCTYPE html>
• <html>
• <body>• <h1>Specify colors using HSL values</h1>
• <h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>
• <h2 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h2>
• <h2 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h2>
• <h2 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h2>
• <h2 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h2>
• <h2 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h2>
• </html>
CSS Backgrounds
• CSS Backgrounds
• The CSS background properties are used to add background effects for
elements.
• CSS background-color
• The background-color property specifies the background color of an
element.
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• body {
• background-color: lightblue;
•}
• </style>
• </head>
• <body>• <p>This page has a light blue background color!</p>
• </html>
Other Elements
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• h1 {
• background-color: green;
•}
• background-color: lightblue;
•}
• background-color: yellow;
•}
• </style>
• </head>
• <body>• <h1>CSS background-color example!</h1>
• <div>
• This is a text inside a div element.
• <p>This paragraph has its own background color.</p>
• We are still in the div element.
• </div>
• </html>
Opacity / Transparency• The opacity property specifies the opacity/transparency of an
element. It can take a value from 0.0 - 1.0. The lower value, the more
transparent:
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• div {
• background-color: green;
•}
• opacity: 0.1;
•}
• opacity: 0.3;
•}
• opacity: 0.6;
•}
• </style>
• </head>
• <body>
• <h1>Transparent Boxes</h1>
can make the text inside a fully transparent element hard to read:</p>
• <h1>opacity 0.1</h1>
• </div>
• <h1>opacity 0.3</h1>
• </div>
• <h1>opacity 0.6</h1>
• </div>
• <h1>opacity 1 (default)</h1>
• </div>
• </html>You might also like
