Scribd
Upload
22 views

HTML CS50

Uploaded by

Hania Sheikh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
22 views

HTML CS50

Uploaded by

Hania Sheikh
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Html-CS50

Lecture2

● <1DOCTYPE html>
It means it’s a html 5 document written in the laser version of html.

● <html></html>
Beginning of the content of html website

● <head></head>
Information that is helpful for the web browser not stuff that is going to
be displayed in the main contents of the web page

----------------------------------------------------------------------------------------------------
HTML
● <a href=”link” >text</a> (links0.html)
“Href ​have the hyperlink that we want to link to when some one clicks
on the contents of inside the tag.​”

<a herf=”hello.html”<click here</a> by clicking on “click here” it will


redirect you to web page hello.html

“You can also use href tags to link contents on the same page”

Linking diff parts on the same page (​ links1.html)


# pound signs mean rather than linking to an individual page ​link to
something with specific ID​ .It means by clicking on section1 link to
whatever has ID section1

Each heading<h> has an ​ID(​it’s an attribute og HTML element to give an


HTML element a unique name​) ​so by giving <h2 id=”section1”>section
1</h2> you can refer h2 heading as section1
HTML 5 Organization
● <header>
● <nav>
● <section>
● ….
These tags are useful for instance in ​CSS​ you can say take anything
inside of the <nav> tag & give it particular stylic properties
New html5 elements
● <audio>
● <video>
● <datalist> (form.html)
CSS
Selectors
(multiple.html)

,​-- It is used when you want you apply same style to


multiple elements
Ex.​ <style>
h1, h2 { color : red; }
</style>

● Descendant or space operator (descendant.html)


We have a list inside of a list( nested list)

ol li { colour: red; } ​-SPACE ​means that style all the descendants/list that
are contained within the ordered list .The only rule CSS following here is ​if
there is a list that is the descendant of or contained within ol than its going
to be red

The contents of ol are children and the content of the ul list are
grandchildren of the ol (child.html)

If you want to select only the immediate children but not the contents
of ul
ol ​> ​li { colour: red; }
> syntax for identifying directly descendants of ol

● Attribute selector​(Styling the generic tags) ​ (attribute.html)


<style>
Input [ type=text] { background-colour: red; }
Input [ type=number] { background-colour: yellow; } </style>
CSS pseudo​-​class
A ​CSS pseudo​-​class​ is a keyword added to a selector that specifies a special
state of the selected element(s)

The syntax of pseudo-classes:

selector:pseudo-class ​{
property​:​ value​;
}

● Hover​ (hover.html)
<button>Clickme</button>
<style>
Button:hover { background-colour :orange; } </style>

The ​colon : s​yntax represents the pseudo-class(representing a specific


state of a html element)

CSS pseudo​-​elements

Pseudo elements ​affect a particular part of html element

● : : before (before.html)
It means that I want to apply the styling before the contents of a
paricular code
<style>
a : : before {
content: “/21d2 click here:” ;
Font-weight: bold; } </style>

: : after ​does the same thing but after the contents of the code
● : : selection
When something is selected it behaves a certain way e.g change
colour

You might also like