Scribd
Upload
3 views

html_notes

The document provides an overview of HTML, including its structure, basic tags, and attributes. It covers essential elements such as headings, paragraphs, links, images, and lists, as well as layout techniques using semantic and non-semantic tags. Additionally, it explains the use of comments, formatting tags, and tables in HTML.

Uploaded by

kavadi.nikhil8909
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views

html_notes

The document provides an overview of HTML, including its structure, basic tags, and attributes. It covers essential elements such as headings, paragraphs, links, images, and lists, as well as layout techniques using semantic and non-semantic tags. Additionally, it explains the use of comments, formatting tags, and tables in HTML.

Uploaded by

kavadi.nikhil8909
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

html[HyperText Markup Language](structure/layout)

css[Cascading Style Sheets] (style)

js[javaScript] (logic)

HTML{
-> Hyper Text Markup Language.
-> html is the code that is used to structure a web page and its content.
-> The component used to design the structure of website are called HTML tags.
}

To create a html file(filename.html)


In vscode we use a extension "live server".

HTML TAGS{
-> A container for some content or other HTML tags
<p>This is a paragraph</p>(here {this is a paragraph} is content and {<p>This is a
paragraph</p>} together we call as element)
}

BASIC HTML PAGE{

<!DOCTYPE html> //tells browser you are using HTML5


<html> //root of an html document
<head> //container for metadata
<title>MY FIRST PAGE</title> //page tittle
</head>
<body> //contains all data rendered by the browser
<p>hello world</p> //paragraph tag
</body>
</html>

QUICK POINTS{

-> html tag is parent of head & body tag


-> most of html elements have opening & closing tags with content in between
-> some tags have no content in between, eg: <br>(used for next line)
-> we can use inspect element/view page source to edit html
}

COMMENTS IN HTML{

-> This is part of code that should not be parsed.


<!--This is an html comment-->
}

NOTE{

->html is not a case sensitive language.


example:
<head>==<HEAD>
<p>==<P>
}

HTML ATTRIBUTES:{
-> Attributes are used to add more information to the tag.
example:
<html lang="en"> (here lang is an attributes and "en" is a value)
}

HEADING TAG:{
-> used to display headings in HTML
<h1>(high importance)
<h2>
<h3>
<h4>
<h5>
<h6>(least importance)
}

PARAGRAPH TAG:{
-> used to add paragraphs in html
<p>this is a sample paragraph</p>
}

ANCHOR TAG:{
-> used to add links to your page.
<a href="https://google.com">Google</a>(here href is attribute)
}

IMAGE TAG:{
-> used to add image to your page.
<img src="/image.png" alt="Random Image">(here src is an attribute and alt also)
(above the image size is large to minimize it we use attribute called height or
width make sure that not to use both height and width)
}

BR TAG:{
-> Used to add next line(line breaks) to your paga
<br>
}

BOLD, ITALIC & UNDERLINE TAGS:{


-> Used to highlight text in your page
<b> Bold </b>(bold means it highlight the text)
<i> Italic </i>(italic means it makes its into curvy)
<u> Underline </u>(underline means its underline the word)
}

BIG & SMALL TAGS:{


-> used to display big & small text on your page
<big>BIG</big>
<small>SMALL</small>
}

HR TAG:{
->used to display a horizontal ruler, used to separate content
<hr>
}

SUBSCRIPT & SUPERSCRIPT TAG:{


-> used to display a horizontal ruler, used to separate content
<sub>subscript</sub>(h₂o)
<sup>superscript</sup>(a²+b)
}

PRE TAG:{
-> used to display text as it is(without ignoring spaces & next line)
example:
<pre>this
is a sample
text.
</pre>
}

PAGE LAYOUT TECHNIQUES:{

->using semantic tags for layout.


//using the right tags:
-> <header>
-> <main>
-> <footer>
-> we have two types of tags
i) semantic tags (semantic tags are elements that convey meaning about their
content)
ii) non-semantic tags (non-semantic tags do not provide any meaningful
information about their content)
}

-> INSIDE MAIN TAG:{

section tag: for a section on your page


<section>
article tag: for an article on your page
<article>
aside tag: for content aside main content(ads)
<aside tag>
}

REVISITING ANCHOR TAG:{

<a href="https://google.com" target="_main"> Googlc</a>


-> for new tab (target="_main") is used.

<a href="https://google.com"><img src="link"><Google</a>


-> for clickable pic (img src="link") is used.
}

REVISITING IMAGE TAG:{

<img src="link" height=50px>


-> to set height (height=50px) is used

<img src="link" width=50px>


-> to set width (width=50px) is used
}

DIV TAG:{

-> Div is a container used for other HTML elements


BLOCK element (take full width)
}
SPAN TAG:{

-> span tag is a container used for other HTML elements


BLOCK element (does not take full width)
}

LIST IN HTML:{

-> lists are used to represent real life list data.


Two Types:
i) unordered(example= ":")
ii) ordered (example="1")

->unordered list:{
<ul>
<li>apple</li>
<li>mango</li>
</ul>
}

->ordered list:{
<ol>
<li>apple</li>
<li>mango</li>
<ol>
}

TABLES IN HTML:{

-> tables are used to represent real life table data.


<tr> used to display table row
<td> used to display table data
<th> used to display table header

You might also like