Initial Setup->
VS Code(recommended) or pw skills(online coding platform) or w3schools (online compiler)
Tutorial vs Documentation->
Tutorial - w3schools
Documentation- mdn by firefox
Why index.html->
html both extensions allowed .html or .htm
index.html- server specification apache default configration setting by default is index.html is loaded of website.
Basic Tags->
<html> - root of website
<head> - meta info of website
<body> - visual part of website
Emmet->
By default configure with VS Code
Emmet is responsible for fast coding like using ! for biolerplate code for HTML
HTML -It is used to create Structure of Website.
HTML Element- Opening Tag + Content + Closing Tag
HTML Element Example ->
<p>Jai Shree Krishna </p>
<opening tag>content<closing tag>
Paragraph Tag->
<p> for Paragraph
lorem for dummy text generator
<p>lorem20</p> for dummy twenty words.
Classes(Used to group elements) & Id(Unique)->
h1#main (Id is unique only one for one element)
p.red.pw.para (class can be used for multiple elements and support multiple elements)
for custom attributes->
p[title="Custom Attribute"]{Content}
Then, Hit Tab
<p title="Custom Attribute">Content</p>
Nesting of Elements using Emmet->
div>ul>li(> is used for child)
<div>
<ul>
<li>
</li>
</ul>
</div>
Sibling using Emmet ->
div>p*3 or div>p+p+p(* or + is used for sibling)
<div>
<p></p>
<p></p>
<p></p>
</div>
Complex Structure->
(div>nav>ul>(li>a{custom-$})*3)+footer>ul>li>p
In Code->
<div>
<nav>
<ul>
<li><a href="">custom-1</a></li>
<li><a href="">custom-2</a></li>
<li><a href="">custom-3</a></li>
</ul>
</nav>
</div>
<footer>
<ul>
<li>
<p></p>
</li>
</ul>
</footer>
For Head section Emmet->
link:favicon
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
link:css
<link rel="stylesheet" href="style/style.css" />
Emmet for CSS->
just write pos it will automatically suggest you properties Position -
selector{
position:relative;//by default
position:relative/absolute/fixed/block/inline-block/grid/flex;
}
just write ov it will automatically suggest you properties overflow-
selector{
overflow:visible/hidden/scroll/auto;
}
Margin Property->
just type m then it will suggest you
selector {margin:100%;}
Headings and Paragraphs->
<h1> to <h6> headings are available in html.
<p>content</p> for paragraph
<br> tag used for line break.
CSS- Adds Design of website
CSS linking - Inline Internal External
Inline - style attribute used with all tags(style is a global attribute)
Global Attribute is common to all HTML Elements, they can be used on all elements they may have no effect on some elements.
h1[style=color:red]{Content}
<h1 style="color:red">Content</h1>
Internal CSS - In Head Section of HTML using css tag
External CSS -
link:css . Hit Tab
<link rel="stylesheet" href="style.css">
In External CSS, Classes and Id's are used to target the HTML Element
Links anchor tag->
a:blank
Then Hit Tab,
<a href="http://google.com" target="_blank" rel="noopener noreferrer">GOOGLE</a>
_blank is for opening in new tab.
Images->
<img alt="description of images" src="source" width="" height=""/>
www(dot)image-map(dot)net - good website for image map generator
Tables->
table>(tr>th*3)+(tr>td*3)*3
<table>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Inline vs Block->
Inline doesnot capture full width of a line example
Block capture full width of a line example <h1> to <h6>, <p> tags etc.
Forms ->
<form action="action.php">
<fieldset>
<legend style="text-align: center">Login Form</legend>
<p>
<!-- for email -->
<label for="emailid">Email:</label>
<input type="email" name="emailvalue" id="emailid" />
</p>
<p>
<!-- for password -->
<label for="passwordid">Password:</label>
<input type="password" name="passwordvalue" id="passwordid" />
</p>
<p>
<!-- for submit -->
<button type="submit">SUBMIT</button>
</p>
</fieldset>
</form>
Semantics->
Semantics means giving meaning to elements. Best for SEO (Search Engine Optimization)
<header>,<main>,<footer><article>,<aside>,<section>
etc.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- title tag -->
<title>HTML Semantic Structure</title>
</head>
<body>
<header>
<nav></nav>
</header>
<main>
<article></article>
<aside></aside>
<section></section>
</main>
<footer></footer>
</body>
</html>
Assignment->
Explore more about HTML Input Tags and Aria-label for Web Accessibility.
Top comments (0)