Basic¶

- father of WWW(1989) & HTML(1991) = tim berners-lee
- mark anderson = developer of 1st browser
- ryan Dahl - NodeJS
- Brandon Eich - javascript father
- netscape browser = https://www.youtube.com/watch?v=80wh_-7c4TU
- 3 main component of any website
- HTML - skeleton
- CSS - flesh
- JS - nerve system
    - https://starkie.dev/blog/how-a-browser-renders-a-web-page#6-calculate-layout-and-paint

Basic
HTML stands for HyperText Markup Language
The latest and current version is HTML 5 which was published in the 2012
It is the standard text formatting language used for creating and displaying pages on the Internet
You can use either .htm or .html as file extension. There is no difference, it is up to you.
<Head> tag has nothing to do with output of page and contains meta information about the HTML page

Meta tag

    <meta name="description" content= "This is profession website for code dev">
    <meta charset="utf-8">
    <meta name="robots" content = "index,follow" >

tags and attribute names can be typed in any case in HTML, in JavaScript they typically must be all lowercase.For example, the HTML onclick event handler attribute is sometimes specified as onClick in HTML, but it must be specified as onclick in JavaScript code
Basic¶
<a> </a> Anchor link tag-> open link in new tab
<button type="button|submit|reset">
HTML 5 Semantic tag
It is the use of HTML markup to reinforce the semantics or meaning of the content.
For example: In semantic HTML tag is not used for bold statement as well as tag is not used for italic. Instead of these we use and tags.
https://www.thoughtco.com/why-use-semantic-html-3468271
https://www.freecodecamp.org/news/semantic-html5-elements/
https://developer.mozilla.org/en-US/docs/Glossary/Semantics 16.https://www.w3schools.com/html/html5_semantic_elements.asp#:~:text=A%20semantic%20element%20clearly%20describes,%3E%20%2D%20Clearly%20defines%20its%20content.
type email in input_Tag
for="idname" in label tag will focus on input of given id
inside tag name Attribute = input having name Attribute will get submitted when user submits form
semantic image Tag

<figure>
       <img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
      <figcaption>Nature picture by Dev</figcaption>
</figure>

HTML Entities - Entity names or entity numbers can be used to display reserved HTML characters.

&copy;
&lt;
@nbsp;

Doctype html¶
All HTML documents must start with a <!DOCTYPE> declaration.
The <!DOCTYPE html> declaration is not an HTML tag
Technically <!DOCTYPE > is not a tag/element, it just an instruction to the browser about the document type or to provide links to a set of rules that the HTML page had to follow, which could mean automatic error checking etc.
The declaration is not an HTML tag. It is an "information" to the browser about what document type to expect.
new features & tags in HTML5 such as <article>,< footer >, <header>,<nav>, <section> may not be supported if the <!DOCTYPE> is not declared.
Tip: The <!DOCTYPE> declaration is NOT case sensitive.
In HTML 5, the declaration is simple:
HTML vs HTML5¶
HTML stands for HyperText Markup language. It is a standard text formatting language used for developing web pages released in 1993.HTML is a language that is interpreted by the browser and it tells the browser what to display and how to display.
why tree strucuture for DOM of browser or html¶
The DOM is the logical representation of the page. In other words, it’s like a tree with the html element at the top, then the head and body elements, and all the child nodes on down to individual paragraphs, list elements and so forth.
According to the Document Object Model (DOM), every HTML tag is an object. Nested tags are “children” of the enclosing one. The text inside a tag is an object as well. All these objects are accessible using JavaScript, and we can use them to modify the page. - For example, document.body is the object representing the tag.
Advantages of DOM Structure -
- You can go forwards and backwards in the tree (random access)
- You can make changes directly to the tree in memory
what are HTML Tags¶
We use HTML tags for placing the elements in the proper and appropriate format. Tags use the symbols <, and > to set them apart from the HTML content.
Attributes are the properties that can be added to an HTML tag.¶
Define the list types in HTML?¶
ordered list
unordered list
definition list
How do you create nested web pages in HTML?
1. using iframe tag
  - its inline tag
  - The iframe tag specifies an inline frame.
  - An inline frame is used to embed another document within the current HTML document.
  - It essentially puts another webpage within the parent page.
  - They are commonly used for advertisements, embedded videos, web analytics and interactive content
What is the alt attribute in HTML? - The alt attribute is used for displaying a text in place of an image whenever the image cannot be loaded due to any technical issue.
What hierarchy do the style sheets follow? - If a single selector includes three different style definitions, the definition that is closest to the actual tag takes precedence. Inline style takes priority over embedded style sheets, which takes priority over external style sheets.
What is the key difference between HTML Elements and Tags?
1. HTML Elements = The sections of the web page, such as a paragraph, an image, or a link is an element, and an element has a certain way of execution. For example, the link is used to be clicked, and the text boxes can be used to input text.
2. The element is an individual component of the HTML web page or document.
3. HTML Tags = HTML elements communicate with the browser how to represent the text and become HTML tags when enclosed within angular brackets <>
What are Forms in HTML?
1. Forms are used to collect the user information when they are filled, and details are provided to save into the database.
Difference between link tag and anchor tag
1. he anchor tag is used to create a hyperlink to another webpage or to a certain part of the webpage and these links are clickable, whereas, link tag defines a link between a document and an external resource and these are not clickable
What are some of the advantages of HTML5 over its previous versions?
1. It has Multimedia Support.
2. It has the capabilities to store offline data using SQL databases and application cache.
3. Javascript can be run in the background
4. HTML5 also allows users to draw various shapes like rectangles, circles, triangles, etc.
5. Included new Semantic tags and form control tags
How to specify the metadata in HTML5?.
1. To specify we can use tag which is a void tag,i.e., it does not have a closing tag. Some of the attributes used with meta tags are name, content, http-equiv, etc. The below image tells how to specify the metadata.
What is a manifest file in HTML5?
1. The manifest file is used to list down resources that can be cached. Browsers use this information to make the web page load faster than the first time. There are 3 sections in the manifest file
If I do not put <!DOCTYPE html> will HTML 5 work?
1. No, the browser will not be able to identify that it is an HTML document and HTML 5 tags do not function properly.
Why is a URL encoded in HTML
1. An URL is encoded to convert non-ASCII characters into a format that can be used over the Internet because a URL is sent over the Internet by using the ASCII character-set only. If a URL contains characters outside the ASCII set, the URL has to be converted. The non-ASCII characters are replaced with a "%" followed by hexadecimal digits.
What are the entities in HTML
1. The HTML character entities are used as a replacement for reserved characters in HTML. You can also replace characters that are not present on your keyboard by entities. These characters are replaced because some characters are reserved in HTML.
What are empty/void elements?
1. HTML elements which do not have closing tags or do not need to be closed are Void elements
2. HTML elements with no content are called empty elements. For example:
  ,
  etc.
Tag Vs element¶
- HTML elements are defined by a starting tag, may contain some content and a closing tag.For example, Heading 1 is a HTML element but just is a starting tag and is a closing tag.
Attributes¶
- HTML attributes provide additional information about HTML elements.
- they are like property of elements
- 1. key value pair (id="someId")
    <h1 id="h1-el">This is H1</h1>
Semantic tags -pdf¶
- convey the meaning—or semantics—of the content contained within them
- A semantic element clearly describes its meaning to both the browser and the developer.
- Examples of non-semantic elements: and - Tells nothing about its content.
- Examples of semantic elements: , , and - Clearly defines its content.
HTML Element Vs Html Tag¶
- Tags are the primary component of the HTML that defines how the content will be structured/ formatted, whereas Attributes are used along with the HTML tags to define the characteristics of the element. For example, Interview questions, in this the ‘align’ is the attribute using which we will align the paragraph to show in the center of the view.

inline vs block¶

Inline Elements
don't start on new Line
Take only necessary width
Inline Elements = label, input , Span, img, i, b, a, aside
can convert to block elements display : block
Block Element
Start on new Line
take full width available
Div, P, Ul, Ol,header, footer,section, main, article, H1 to H6, Table
can convert block to inline using display property display : inline;

empty elements do not have end tag¶

- 1. ` <br>`
-    2. `<meta>`
-       3. `<hr>`

CANVAS `<canvas>`¶

By default, the <canvas>element has no border and no content.
The default size of the canvas is 300 pixels × 150 pixels
The <canvas> element is only a container for graphics. You must use JavaScript to actually draw the graphics.
must have an id attribute so it can be referred to by JavaScript.
You can have multiple <canvas> elements on one HTML page.
Canvas can respond to any user action (key clicks, mouse clicks, button clicks, finger movement).
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>

```

2. A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content.
1. Draw a Line
   1. moveTo(x,y) - defines the starting point of the line
   2. lineTo(x,y) - defines the ending point of the line
   3. ctx.stroke() - to draw line

## innerHTML

    - When to use it - When you want to see the HTML markup and what exactly is in our element — including any spacing, line break, and formatting irregulars.
    -  If the text inside the element includes the characters &, <, or >, innerHTML will return these characters as HTML entities &, <, and >.

considered as tag i.e. innerHTML parses HTML tag

## innerText

    - when to use it :- When you only need to see what’s in the element — with zero formatting.
    - The innerText property returns the content of all elements, except for and elements.
    - though it adds the content to html element but it consider it as text not as html tag

## textContent

    - when to use it :- When you want to see what’s in the element, plus any styling on it.
    - The content of all elements in the node, including script and style elements. It’s aware of formatting like spacing and line breaks and will return those.
    - Note: Unlike innerHTML, textContent has better performance because its value is not parsed as HTML. For that reason, using textContent can also prevent Cross-Site Scripting (XSS) attacks.
    - Unlike innerText, textContent is not aware of CSS styling and will not trigger a reflow. All Node objects have textContent, whereas only HTMLElement objects have innerText.

## Why to use JS in separate file than HTML File

- It separates HTML and code
- .It makes HTML and JavaScript easier to read and maintain
- Cached JavaScript files can speed up page loads

## JavaScript supports two styles of comments

`//- single line comment and   /* multi line comment  */`

## How to include JS in HTML File

- script tag should be included between the <head> tags in your HTML document. `<script type="text/javascript">`
- The type attribute is not required. JavaScript is the default scripting language in HTML.

```

Scripts can be placed in the , or in the section of an HTML page, or in both.

Event bubbling¶

- is a way of event propagation in the HTML DOM API, when an event occurs in an element inside another element, and both elements have registered a handle for that event. With bubbling, the event is first captured and handled by the innermost element and then propagated to outer elements. The execution starts from that event and goes to its parent element. Then the execution passes to its parent element and so on till the body element.
- JavaScript allows DOM elements to be nested inside each other. In such a case, if the handler of the child is clicked, the handler of the parent will also work as if it were clicked too.

Basic¶

Basic¶

Doctype html¶

HTML vs HTML5¶

why tree strucuture for DOM of browser or html¶

what are HTML Tags¶

Attributes are the properties that can be added to an HTML tag.¶

Define the list types in HTML?¶

Tag Vs element¶

Attributes¶

Semantic tags -pdf¶

HTML Element Vs Html Tag¶

inline vs block¶

empty elements do not have end tag¶

CANVAS <canvas>¶

Event bubbling¶

CANVAS `<canvas>`¶