HTML HTML5 Notes Compiled by Yogesh Verma, Software Engineer (MERN Stack Web Developer)

Yogesh Verma — Thu, 22 Jun 2023 07:19:00 +0000

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.

Fundamentals Concepts of Web Development

Yogesh Verma — Thu, 01 Jun 2023 13:03:41 +0000

These concepts are fundamental and should be known if you want to enter the field of web development.

1) Web: a collection of interconnected resources and documents It means all the public websites or pages that users can access on their local computers and other devices through the internet.

2) Development: It means creation—websites (static, read-only) and web applications (dynamic, user-interactive) are developed.

3)Three layers of Web applications are -> (i) the Front end ( HTML,CSS , JavaScript), (ii) the Back end - logic and working of web application [ Brain ], (iii) the database layer - where all the data is managed of the web application

4) A popular full stack is the MERN stack: It stands for MongoDB, Express JS, React JS, and Node JS.

5) Network: It is the connection of a computer system for the sharing of data and resources through a medium. Interconnection of different resources (computer, printers, laptop) within a single system.

6) Internet: It is a global system that exists billions of devices interconnected with each other (network of networks) or (Global Network)

7) IP Address: Address for identifying each device uniquely.

8) Browser: It is a tool to access documents, websites, and web applications available on World Wide Web or simply Web
Ex. (Chrome(Google), Safari(Apple), Firefox, Opera)

9) Browser Engine: It is an application that is used to access resources [websites, web applications].
Ex. (Chrome(V8 JS Engine), Firefox(Quantum)

10) Client: Who asks for resources (for example, Get, Put, Put, Delete)
Ex. Laptop, PC, App

11) Server: Who full-fill requests of clients for resources
Ex. App, Web, DB, File

12) DNS [Domain Name System] : It converts a domain name into an IP address or is used to map a domain name to the IP address of a web server. A domain name system (DNS) turns domain names into IP addresses, which allow browsers to get to websites and other internet resources. Every device on the internet has an IP address, which other devices can use to locate the device.

DEV Community: Yogesh Verma

HTML HTML5 Notes Compiled by Yogesh Verma, Software Engineer (MERN Stack Web Developer)

Fundamentals Concepts of Web Development