Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
5 views

HTML and Css

HTML is the standard markup language used to define the structure of web pages. It uses tags to define elements like headings, paragraphs, links, images, and more. Some key HTML elements and tags include <h1> for main headings, <p> for paragraphs, <a> for links, <img> for images, and <div> and <span> for dividing content. CSS can be used to style and position HTML elements on the page using selectors, properties, and values. Common CSS properties include color, font-size, margin, padding, and position. HTML and CSS allow web developers to build structured, formatted, and laid out web pages.

Uploaded by

Sowndarya Devi
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

HTML and Css

HTML is the standard markup language used to define the structure of web pages. It uses tags to define elements like headings, paragraphs, links, images, and more. Some key HTML elements and tags include <h1> for main headings, <p> for paragraphs, <a> for links, <img> for images, and <div> and <span> for dividing content. CSS can be used to style and position HTML elements on the page using selectors, properties, and values. Common CSS properties include color, font-size, margin, padding, and position. HTML and CSS allow web developers to build structured, formatted, and laid out web pages.

Uploaded by

Sowndarya Devi
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

HTML

1.Hyper Text Markup Language is standard markup language for creating web page
Markup Language=>using tags to define the elements ,human readable
eg:<title>title name</title>(title= tag)
2.It is used to describe the structure of the web page and its content

1. <!DOCTYPE html> declaration defines that this document is an HTML5 document


2. <html>=root element of an HTML page
3. <head>=meta information about the HTML page

meta information=information about the web page(eg:title)it will not display in the web page
it is machine parsable(machine readable)=>eg:we will tell the computer want to do when
reload

4. <title>=a title for the HTML page (which is shown in the browser's title bar)
5. <body> =document's body,
6. <h1> =large heading
7. <p> =a paragraph

Html element
An HTML element is defined by a start tag, some content, and an end tag
<p>this is my paragraph</p>
<p>=start tag;this is my paragraph=content;</p>=end tag
Some HTML elements have no content (like the <br> element). These elements
are called empty elements. Empty elements do not have an end tag!

HTML headings
HTML headings are defined with the <h1> to <h6> tags.[h1>h6]
HTML links
HTML links are defined with the <a> tag
<a href="https://www.w3schools.com">This is a link</a>
HTML Attributes
Provide additional info of the element
Only present in start tag
It’s form=>name=”value”
eg:href=”value”
HTML empty tag
<hr>=horizontal line
<br>=new line
HTML tags
<pre></pre>=>what we have written in the html document will be presented without any
change in the web page (eg:poem)
HTML Style
The HTML style attribute is used to add styles to an element
<tagname style="property:value;">
HTML text formatting(does not start in new line)

● <b> - Bold text(blue)


● <strong> - Important text(blue)
● <i> - Italic text(blue)
● <em> - Emphasized(important) text(blue)
● <mark> - highlighted text(blue)
● <small> - Smaller text(blue)href
● <del> - Deleted text(strike a line through deleted text)
● <ins> - Inserted text(blue)
● <sub> - Subscript text( H2O)
● <sup> - Superscript text( 2^3)

HTML quotation

<abb>=>abbreviation word and contain the abbreviation in the title


attribute

<blockquote>block quote from external website

<q>=>short inline quotation

<bdo>=>Defines the text direction(rtl=right to left or ltr )

<address>=>Defines contact information for the author/owner of a


document(italic)

<cite>=>title of the work(italic)

HTML Comment

<!-- Write your comments here →

HTML LINKS
Anchor tag<a>= used for links uses,
1. href attributes in <a> tag to indicate the destination
2.Target attributes in <a> tag to indicate where the link should get opened
_blank=new window,_self=same window
3.Use mailto: inside the href attribute to create a link that opens the
user's email program in <a> tag

4.title attributes is used to shown tooltip text

Tooltip text =>we hover the mouse over the text it will define that text
eg:abbreviation[WHO]

5.Use the <img> element (inside <a>) to use an image as a link

Absolute and relative url


Absolute url=>path from the root directory ,eg:/home/index.html[here /
represents the root],eg:https://www.w3schools.com/html/html_links.asp (a full web
address) for better understanding=>actual address of the house

Relative path=>path from the current directory,local address, (without the


"https://www" part),eg: ../dep/college/index.html[here ../ indicates the parent of the
current directory] for better understanding=>from your location to the
address of the house

HTML image

<img> tag=>empty tag,attributes scr=url of the


image,alt=text to be shown when image is
unavailable,style=width,height and float property;float property to let
the image float to the left or to the right

<picture>=>Resize the browser window to load different images,contain two


tags source(empty tag)=2 attributes media=min-width,srcset=url and
image(empty tag),format is the source tag followed by the image tag

<map>=>image map,contain area tag

<area>=>empty tag,define the clickable area on the image map,contain


attributes like shape,coords=coordinates of shape,href=path,alt

HTML favicon

<link rel="icon" type="image/x-icon" href="/images/favicon.ico">

rel=relation type=media type href=location

CSS SELECTORS

1.universal selector

All the element in css


*{property:”value”};

2.element selector

Specified element

h1{};

3.group of element selector

Specified group of elements

H1,h2{};

4.div.class{};

[it will select only div that has a class name that was specified
in the selector]

5.div b{};

[space indicates=>b inside the div will be selected no matter if


its direct or indirect child it will be get selected]

6. direct child

ul>li{};[direct child of unordered list]

ul>:nth-child(){};

7.general sibling selector

selects all elements that are next siblings of a specified element

Li.red~li{};

[~=>after the list that comes after the li.red will get the css
property]

8.li.red+li{};[adjacent sibiling selector]

[+=>very next chlid the list that comes after li.red will get the
css property]

select an element that is directly after another specific element.

9.pseudo class

H2:hover{};[if we hover the element the css property will get


defined]

10.Pseudo elements
Style the first letter, or line, of an element and Insert content before, or
after, the content of an element

Div::first-letter{};

11.class and id

.class name{};#id name{};

12.attribute selector

The [attribute] selector is used to select elements with a specified


attribute.

input[type=”text”]{}

Multiple style sheet

If some properties have been defined for the same selector (element) in
different style sheets[internal ,external,inline], the value from the last read
style sheet will be used.

Inline style >internal,external style

Padding{all side}=>padding{3px}

padding{Top right bottom left}=> padding{10px 20px 30px 10px}

Padding{top/bottom left/right}=>padding{10px 30px}

padding=>Padding is used to create space around(inside) an element's


content, inside of any defined borders

Margin
Margins are used to create space around elements, outside of any
defined borders.

POSITION
STATIC
Normal document flow,default position is static.
RELATIVE
If we set element to position relative we also want to specifies the left
right top bottom of the position from its original position
ABSOLUTE
If we set element to position absolute set the left,right… of the position
from its parent position .To define the absolute property for child element the parent
element must be relative to the child.If the parent position is not defined it will take
the viewport as parent
FIXED
The positon will be fixed .its position is corresponds to the view port
STICKY
Static+fixed.It will be in formal document flow when the element which
the position is defined sticky get arrival it will get fixed in the screen
z-index=> define the stack order of the element(which element should be placed in
front of, or behind, the others).

Specificity
inline(1000)>id(100)>class,pesudo class,atrribute(10)>element,pesudo
element(1)>*(0)
!important rule, it will override ALL previous styling rules

You might also like