Tech-Notes

Hypertext markup language

standard markup language for creating web page in browsers

Basic Syntax

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  </body>
</html>

Core tags

Tag Description
<!DOCTYPE html> Declares the HTML version as 5.
<html> Defines the root of an HTML document.
<body> Defines the body of the document.
<head> Contains metadata like title, links, and meta tags.
<title> title in browser’s title bar or in the page’s tab

Common tags

Tag Description
<h1>to <h6> Defines headings from level 1 (largest) to level 6 (smallest). important for seo
<p> Defines a paragraph. Does not preserve line breaks.
<pre> Defines preformatted text. Preserves spaces and line breaks.
<a> Creates hyperlinks for different pages. attributes title, href
<img> Embeds an image. Includes attributes like src, alt, heigth, width etc.
<br> Line break
<!-- --> Comment tag

Format Elements

Elements Details Alternative Details Output
<b> make text appear thicker <strong> important text. bold
<i> Italic text <em> emphasizing text italic
<mark> Highlight text in yellow      
<small> reduction in font size     small
<del> indicates text deleted <s> not relevant strike
<ins> indicates text inserted <u> misspelled text underlline
<sup> Superscript text     supscript
<sub> Subscript text     subscript
<cite> defines title of book inside <p>(same as italic)      
<address> defines contact information (same as italic)      
<abbr> defines abbrevation (same as italic)      
<dfn> defines title of a content in same line (same as italic)      
<q> insert quotaion     “quote”
<code> define computer code <kbd>,<pre>,<samp>,<var> keyboard shortcut code
<article> specify a content (same like p tag)      
<blockquote> specifies text is quoted from another site.(same like p tag)      
<aside> defines some content aside from the content it is placed in.mostly used in sidebar (same like p tag)      
<base> specifies the base URL and/or target for all relative URLs      
<bdi> bi directional isolation(used for arabic language in reverse)      
<bdo> reverse the text(<bdo dir="rtl">This</bdo>)      
<canvas> used to draw graphics by javascript      
<data> machine readable value(<data value="21053">Cherry Tomato</data)      
<dialog> show text in dialog box<dialog open>text</dialog>      
<div> defines division of web page      
<fieldset> group related elements like form label & input      
<figure> group <img> and <figcaption>(which provides caption for img)      
<footer> footer section      
<header> contains h tags and p      
<hr> thematic break      
iframe embed another website      
<legend> define caption for fieldset      
<main> specifies main content      
<label> wrap around any content and has for attribute that id      
<meter> creates a progress bar <meter id="disk_c" value="2" min="0" max="10"></meter> <progress>    
<nav> wrap around navigation links      
<noscript> display text if script disabled in browser      
<output> used by javascript      
<picture> responsive images      
<section> defines section of webpage      
<time> display time      
<wbr> wont break the word if browser shrinks      

Input(Textarea):

<textarea rows="4" cols="50"></textarea>

Select with autocomplete:

<input list="browsers" name="browser" id="browser">
  <datalist id="browsers">
    <option value="Edge">
    <option value="Chrome">
  </datalist>

<select name="cars" id="cars">
    <optgroup label="Swedish Cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
    </optgroup>
    <optgroup label="German Cars">
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </optgroup>
  </select>

Button

creates a button element

<button type="button/submit/reset" disabled="false" formaction="URL" formmethod="post">Click Me!</button>

Description

creates a decription list

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

Detail Element

minimize maximize content

<details>
  <summary>Epcot Center</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

Depreciated tags:

embed, frame, font, frameset, noframes, object, tt, applet, acronym, basefont, big, center, dir

Map & area:

we can write hrefs inside an image based co ordinatinates

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
</map>

Audio

embed sound content

<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Video

<video width="320" height="240" controls>
  <source src="forrest_gump.mp4" type="video/mp4">
  <source src="forrest_gump.ogg" type="video/ogg">
  <track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>

List:

  1. Ordered List
<ol>
   <li>hiii</li>	//will give with number in front 
    <li>hello</li>
</ol>
  1. Unordered List
<ul>
<li>hiii</li>	//will give with dot in front of list 
<li>hello</li>
</ul>

Table

<table>
	<caption>This is table caption</caption>
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tbody><tr>
    <th>Title</th>
    <th>Price</th>
  </tr></tbody>
  <tfoot><tr>
    <td>My first HTML</td>
    <td>$53</td>
  </tr></tfoot>
</table>

<table border=”2”>
   <tr align=”center”>
      <td colspan=”2”></td>
      <td bgcolor=”red”></td>
      <td></td>
   </tr>
</table>

Inline style

<html>
 <body>
<div style="background-color:green; color:white; padding:20px;"></div>
This alone shown in  <span style="color:red">red color</span>
 </body>
</html>

Blocks vs Inline:

Block- they will appear on a new line, and any content that goes after it will also appear on a new line.

<div><p><address><blockquote><dd><dl><dt><fieldset><form><h1><hr><li><main><nav><noscript><ol><pre><tables><tfoot><ul>

html5

<article><aside><canvas><figcaption><footer><figure><header><hgroup><output><section><video>

Inline-surround only small parts of content’

Forms

<body>
  <form action=”http:rajesh.com” method=”GET”>	//show details in url
    <input type=”text” name=”usr”> enter username:</input>
  </form>
  <form action=”http:rajesh.com” method=”POST”>	//not show details
    <input type=”password” name=”pwd”> enter password:</input>
    <input type=”radio” name=”gender” value=”male”> male</input>
    <input type=”checkbox” name=”gender” value=”female”> male</input>
    <input type=”submit” value=”enter”></input>
  </form>
</body>

<form action="/action_page.php" method="get" autocomplete="on" enctype="multipart/form-data" enctype="text/plain">

HTML 5

Forms

Integrated API (Application Programming Interfaces)

HTML 5 provide 7Content Models:

Metadata: Content that sets up the presentation or behavior of the rest of the content. These elements are found in the head of the document. Elements: , , ,

Embedded: Content that imports other resources into the document. Elements:

Interactive: Content specifically intended for user interaction. Elements: ,

Heading: Defines a section header. Elements: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hgroup>

Phrasing: This model has a number of inline level elements in common with HTML4. Elements: , , ,

Flow content: Contains the majority of HTML5 elements that would be included in the normal flow of the document.

Sectioning content: Defines the scope of headings, content, navigation, and footers. Elements: <article>, <aside>, <nav>, <section>

Header is comes inside body tag and it s totally different from <head></head>

newsblogs entries

Contents of the article element, widgets, gadjet, comment, magazines, forum post

Welcome

Heading

content or image

AUDIO