Scribd
Upload
3 views2 pages

HTML and CSS Notes

The document is an HTML template for a webpage that includes various elements such as ordered and unordered lists, images, audio, and video. It demonstrates the use of internal CSS for styling, including background colors and font changes. Additionally, it features headings with different styles and formats to showcase the structure of a webpage.

Uploaded by

ariataye4
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views2 pages

HTML and CSS Notes

The document is an HTML template for a webpage that includes various elements such as ordered and unordered lists, images, audio, and video. It demonstrates the use of internal CSS for styling, including background colors and font changes. Additionally, it features headings with different styles and formats to showcase the structure of a webpage.

Uploaded by

ariataye4
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

<!DOCTYPE html> <!

-- Every web page needs this -->

<html> <!-- Text below is in html format-->

<head> <!-- Header section -->

<title> webpage title </title> <!--tittle on tab sheet of web browser→

<style> <!--Internal CSS-->

<!--Background Colour of the ordered list changes -->

ol { background-color: powderblue;}

li {font-family:"Algerian";} <!-- Font for all list items change-->

</style> <!--Close CSS internal Styles -->

</head> <!-- End header section -->

<body> <!-- Body section of Web page-->

<!-- </br> Self closing tag moves cursor to the next line <p> Is the paragraph tag -->

<p> Many Webpages make a </br>great Website.</p>

<ol> <!-- ol=> Ordered Lists li=> List items-->

<li>Sun rises at <b>dawn</b></li> <!-- B is for bold -->

<li>The Sun moves <strong>from</strong> the east </li> <!-- Strong is also bold-->

<li><i>The Sun moves to the west </i></li> <!-- I is italics-->

<li>Sun sets at <u>dusk</u> </li> <!-- U is underlined -->

</ol>

<!-- Unordered list Style = “” is Inline CSS The ones below are for text allignment-->

<ul>

<li style = "text-align:center;">Balloons are dangerous </li>

<li style = "text-align:right;">Pollution is bad </li>

<li style = "text-align:left;">Global warming is happening </li>

</ul>
<!-- Insert Image, audio and Video -->

<!--img => image src => source alt => alternative text -->

<!-- Style=”” is internal css -->

<img src ="Ï[Link]" alt="Image of desktop" style = "width:200px;height:100px;">

</br> <!-- br Introduce a break between images <p> introduces images as separate
paragraphs-->

<p> <img src ="Ï[Link]" alt="Image of desktop" width = "200" height="100"> </p>

<!-- Media is in a different location-->

<p> <img src ="C:\Desktop\CoRo\Media\[Link]" alt="icons on desktop" width =


"100" height="300"> </p>

<!-- Video added -->

<video width="320" height= "200" controls>

<source src =" C:\Desktop\CoRo\Media\mov_bbb.mp4" type ="video/mp4">

</video>

<audio controls>

<source src ="C:\ Desktop\CoRo\Media\Read and think.mp3" type="audio/mp3">

Your browser does not support the audio file. <!—Message to display -->

</audio>

<!-- Headings With css inline formatting -->

<h1 style = "color: purple;"> Heading 1 </h1>

<h2 style = "color: rgb(40,100, 255)">Heading 2 </h2> <!-- RGB(0-255)-->

<h3 style = "color:#572" > Heading 3 </h3> <!--Heaxidecimal colour values-->

<h4 style = "font-family: Algerian;"> Heading 4 </h4>

<h5 style = "color: Blue; font-family: courier;"> Heading 5 </h5>

<h6> Heading 6 </h6>

</body>

</html> <!-- Close this tag -->

You might also like