html_basic

Posted on Edited on In ,
Go through common html tag

HTML

block box and inline box element

Both block and inline element are box! but with different formatting contexts, say for inline-box you can set padding, background, border for them, but can’t set width and height for inline element.

By default, a block level element's content is 100% of the width of its parent element, and as tall as its content. Inline elements are as tall as their content, and as wide as their content. You can’t set width or height on inline elements — they just sit inside the content of block level elements

Block-level elements may contain inline elements and (sometimes) other block-level elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements

Inline elements may contain only data and other inline elements. You can't put block elements inside inline elements.

The behavior of elements which have a block or inline formatting context is defined like this.

  • block formatting context
    In a block formatting context, boxes are laid out one after the other vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the ‘margin’ properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

    By default block elements will consume all of the space in the inline direction.

In a block formatting context, each box’s left outer edge touches the left edge of the containing block.

  • inline formatting context
    In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box

Block element

  • address, article, aside, div, dd, d,t fieldset, footer, form, h1, h6, header, nav, hr, li, ol, p, ul, table etc

Inline element

  • a, audio, video, button, img, input, select, b, br, i, iframe, label, svg etc.

ALL inline elements and ALL block elements

Global attribute

The global attributes are attributes that can be used with all HTML elements(tag), include custom tag. below are common global attributes.

attribute Description
style Specifies an inline CSS style for an element
class Specifies one or more classnames for an element
id Specifies a unique id for an element
title The value of the title attribute will be displayed as a tooltip when you mouse over the element
draggable Specifies whether an element is draggable or not
data-* Used to store custom data private to the page or application

empty 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!

  • <br>
  • <hr>
  • <img>
  • <input>

Quotes attributes value

Single or Double Quotes?

Double quotes around attribute values are the most common in HTML, but single quotes can also be used.
In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes

When you move the mouse over a link, the mouse arrow will turn into a little hand, A link does not have to be text. A link can be an image or any other inline HTML element

The target attribute specifies where to open the linked document.

  • _self - Default. Opens the document in the same window/tab as it was clicked
  • _blank - Opens the document in a new window or tab

Use mailto: inside the href attribute to create a link that opens the user’s email program (to let them send a new email):

1
<a href="mailto:someone@example.com">Send email</a>

Jump to particular element on the same page or another page

1
2
3
4
5
<!--C4 is element id on the same page-->
<a href="#C4">Jump to Chapter 4</a> 

<!--C4 is element id on the another page-->
<a href="html_demo.html#C4">Jump to Chapter 4</a>

Image vs Picture

Always specify the width and height of an image. If width and height are not specified, the web page might flicker while the image loads. as Browser does not know the width and height, it uses zero, after get the image, the whole page is render again which causes flicker.

The most common use of the <picture> element will be for art direction in responsive designs. Instead of having one image that is scaled up or down based on the viewport width, multiple images can be designed to more nicely fill the browser viewport.

The <picture> element contains two tags: one or more <source> tags and one <img> tag.

The browser will look for the first <source> element where the media query matches the current viewport width, and then it will display the proper image (specified in the srcset attribute). The <img> element is required as the last child of the <picture> element, as a fallback option if none of the source tags matches.

Tip: The <picture> element works “similar” to <video> and <audio>. You set up different sources, and the first source that fits the preferences is the one being used.

1
2
3
4
5
 <picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

iframe

An HTML iframe is used to display a web page within a web page.

1
<iframe src="https://www.google.com" name="iframe_a" height="300px" width="100%" title="Iframe Example"></iframe>

use iframe as the target of link

1
2
<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>
<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

File Path

Path Description
<img src=”picture.jpg”> The “picture.jpg” file is located in the same folder as the current page
<img src=”images/picture.jpg”> The “picture.jpg” file is located in the images folder in the current folder
<img src=”/images/picture.jpg”> The “picture.jpg” file is located in the images folder at the root of the current web
<img src=”../picture.jpg”> The “picture.jpg” file is located in the folder one level up from the current folder

HTML Entities

If you use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags.

Character entities are used to display reserved characters in HTML.
A character entity looks like this in html directly

1
2
3
4
5
&entity_name;
OR
&#entity_number; 

To display a less than sign (<) we must write: &lt; or &#60;

Useful entities

symbol entities

Emojis

Emojis are characters from the UTF-8 character set: 😄 😍 💗, They are letters (characters) from the UTF-8 (Unicode) character set. display like image.

  • 😄 is 128516
  • 😍 is 128525
  • 💗 is 128151

Two place to use UTF-8 code.

1
<p>&#128512;</p>
1
2
3
a::after {
    content: "\128512";
}

Emoji Unicode Reference

URL encoding

URLs can only be sent over the Internet using the ASCII character-set. If a URL contains characters outside the ASCII set, the URL has to be converted.

URL encoding converts non-ASCII characters into a format that can be transmitted over the Internet.
URL encoding replaces non-ASCII characters with a “%” followed by hexadecimal digits.
URLs cannot contain spaces. URL encoding normally replaces a space with a plus (+) sign, or %20.

Form

Form elements have <input> <select> <textarea>

Each input field must have a name attribute to be submitted.
If the name attribute is omitted, the data of that input field will not be sent at all, as we have to send name and value pairs with Post method.

Different input types, actually, some built-in validation for each type and styes for that

  • <input type=”button”>
  • <input type=”checkbox”>
  • <input type=”color”>
  • <input type=”date”>
  • <input type=”datetime-local”>
  • <input type=”email”>
  • <input type=”file”>
  • <input type=”hidden”>
  • <input type=”image”>
  • <input type=”month”>
  • <input type=”number”>
  • <input type=”password”>
  • <input type=”radio”>
  • <input type=”range”>
  • <input type=”reset”>
  • <input type=”search”>
  • <input type=”submit”>
  • <input type=”tel”>
  • <input type=”text”>
  • <input type=”time”>
  • <input type=”url”>
  • <input type=”week”>
1
2
3
4
5
6
7
8
9
10
11
12
Attribute 	Description
checked 	Specifies that an input field should be pre-selected when the page loads (for type="checkbox" or type="radio")
disabled 	Specifies that an input field should be disabled
max             Specifies the maximum value for an input field
maxlength 	Specifies the maximum number of character for an input field
min 	        Specifies the minimum value for an input field
pattern 	Specifies a regular expression to check the input value against
readonly 	Specifies that an input field is read only (cannot be changed)
required 	Specifies that an input field is required (must be filled out)
size 	        Specifies the width (in characters) of an input field
step 	        Specifies the legal number intervals for an input field
value 	        Specifies the default value for an input field

SVG in html

SVG defines vector-based graphics in XML format, the HTML <svg> element is a container for SVG graphics.

1
2
3
4
<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

video

There are three supported video formats: MP4, WebM, and Ogg by browser built-in player. MP4 is popular than others as most browser supports it.

1
2
3
4
5
 <video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

audio

There are three supported audio formats: MP3, WAV, and OGG by browser built-in player, mp3 is more popular than others.

1
2
3
4
5
 <audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Plugin

Plug-ins are computer programs that extend the standard functionality of the browser,

Plug-ins were designed to be used for many different purposes:

  • To run Java applets
  • To run Microsoft ActiveX controls
  • To display Flash movies
  • To display maps
  • To scan for viruses
  • To verify a bank id

Hence Plugin-in can do more than <video> and <audio>, and browser supports it long time ago, there are two type to include plugin <object> Microsoft standard and <embed> way, always use later as it’s supported by most browsers, even Microsoft browser.

1
<embed type="video/webm" src="video.mp4" width="400" height="300">

HTML built-in API

API is used by JS to get information, like GEO, Storage, Drap/Drop

The getCurrentPosition() method is used to return the user’s position. then you and print it or show it in a Map

Drag and Droop

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 <!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

Web Storage
HTML web storage provides two objects for storing data on the client:

  • window.localStorage - stores data with no expiration date
  • window.sessionStorage - stores data for one session (data is lost when the browser tab is closed)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// Store
localStorage.setItem("lastname", "Smith");
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
//localStorage.lastname
localStorage.removeItem("lastname");

//Session storage
if (sessionStorage.clickcount) {
  sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
  sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";

Events

Events

  • Window event
  • Form events
  • Keyboard events
  • Mouse events
  • Clipboard events
  • Drap events
  • Media events

ALL Events

REF