Skip to main content

HTML

 

HTML 

HYPERTEXT MARKUP LANGUAGE

 

Helps to build the Structure Layer  Of  webpage.


To Learn HTML, we need 

TEXT EDITOR ( NOTEPAD ,NOTEPAD ++ ,VS CODE)

BROwSER


Notepad  vs wordPad  vs  Microsoft  word


BASIC HTML STRUCTURE


<!DOCTYPE html>

<html >
<head>
    
</head>

<body>
    
</body>

</html>

Version

Html File

Head Portion

Body Portion

VS CODE SHORTCUT ---   !


EXTENSIONS FOR VS CODE


HTML Tags are Not Case Sensitive

Save file as index.html

 

TEXT TAGS

Heading  -- <h1>  </h1>  --  h1 to h6

Paragraph -- <p>

Pre-Formatted Text Tag - <pre>

Italic , bold,underline -- <i>,<b>,<u>

Strong and emphasis -- <strong> <em>

Formula --  <sub> <sup> -- Superscript , Subscript

To break the line -- <br>

To draw horizontal line -- <hr>

For Comments -- <!--  -->


<h1>TEXT TAGS</h1>
<p>Lorem ipsum <U>dolor</U> sit amet consectetur adipisicing elit. <br>Ipsam sapiente 
nesciunt distinctio repudiandae at debitis est itaque maiores. Voluptates magnam 
corrupti sit harum commodi est hic ab mollitia necessitatibus cupiditate!</p>
<hr>
H<sub>2</sub>O <br>
X<sup>2</sup>+ Y<sup>2</sup>

OPEN TAG , CLOSE TAG & SELF CLOSING TAG


LINK TAGS

<link> - Helps to connect external style sheet(css file) and html file.

<a>   - Hyperlink Tag / Anchor Tag

<a href="https://www.youtube.com" target="_blank" >YouTube</a>  

“target” = _blank ,_parent,_self,_top


<a href="#top">Go to TOP of the Page</a>


<nav> - Used for website's navigation

<nav>
    <a>Home</a>
    <a>About</a>
    <a>Contact</a>
</nav>

Attribute : target , href 

LIST TAG

Ordered List  - <ol>,<li>

Unordered List - <ul>,<li>

Description List - <dl>,<dt>,<dd>

Nested List

<body>
    <ol>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ol>
    <hr>
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
    <hr>
    <dl>
        <dt>HTML</dt>
        <dd>Hypertext Markup Language</dd>
        <dt>CSS</dt>
        <dd>Cascading Style Sheet</dd>
        <dt>JS</dt>
        <dd>Java Script</dd>
    </dl>
    <hr>
    <ol>
        <li>One</li>
        <li>Two <ul>
                <li>Twenty One</li>
                <li>Twenty Two</li>
                <li>Twenty Three</li>
            </ul>
        </li>
        <li>Three</li>
    </ol>

</body>

  

MULTIMEDIA TAG

Image

Audio

Video

title tag vs title attribute

 https://github.com/SUSITHRAHARIDAS/MULTIMEDIA

Attribute : src , alt , height , width, controls ,title

ABSOLUTE PATH vs RELATIVE PATH


<audio src='C:\Users\Suha\Desktop\Practise\Multimedia\Theme.mp3' controls></audio>

<br>

<img src="../TRAIL/bg.jpg" alt="Image">

Absolute path address starts from the directory

In relative path with relative to the current working file we write the address

Single dot helps to access the files from the same folder where our current working file is present;

Double dot  helps to access the files & Folders  of our current working file ‘s parent folder;

GRAND PARENT FOLDER

PARENT FOLDER

CHILD FOLDER

SINGLE DOT . for same folder

DOUBLE DOT  .. for prevIous folder


<img src="Frame.jpg" alt="Your Browser doesn't support the  Format" height="100"
width="50px",title = "BgFrame" >

<audio src ="introsong.mp3" alt="Your Browser doesn't support the  Format"
controls></audio>

<video src ="introsong.mp4" alt="Your Browser doesn't support the  Format"
controls></video>


IFRAME TAG

iframe tag helps to embed another HTML document in current HTML. The IFrame   is often used to insert content from another source, such as an advertisement, into a Web page.


<iframe src="https://myzenclass.blogspot.com/" frameborder="0"></iframe>


<iframe width="560" height="315" src="https://www.youtube.com/embed/h71KfMMG4jU"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;
clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>

TABLE TAG

table (border – deprecated tag (in red color) , height, width,cell padding cell spacing

tr

th / td

colspan

rowspan

thead, tbody, tfoot (CSS - POSITION )


<table border='1'>

    <tr>
      <th>Name</th>
      <th>Tamil</th>
      <th>English</th>
      <th>Maths</th>
      <th colspan="2">Science</th>
      
    </tr>
    
    <tr>
       <th colspan='4'></th>
      <th >Botany</th>
      <th>Zoology</th>
    </tr>
    
    <tr>
        <td>Priya</td>
        <td>97</td>
        <td>90</td>
        <td>100</td>
        <td>86</td>
        <td>85</td>
    </tr>
    
    </table>


META TAG

Meta tag provide data (info) about the document

1. Name Content –author, description, revised date

2. Viewport

3. Keywords

4. http-equiv

5.charset



<meta charset="UTF-8">
<meta name="author" content="author-name">
<meta  name = 'keywords'  content = 'HTML,CSS,JS,COMPARISON'> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta  http-equiv="refresh" content='2;url=https://www.youtube.com'>

TAG + CONTENT = HTML ELEMENT

 

INLINE & BLOCK ELEMENT

BLOCK ELEMENT – Occupy the entire width of the browser (heading tag, paragraph tag,div)

INLINE ELEMENT – Occupy on the element filled portion on the browser(span,italic,bold,img,a>

 

 

SEMANTIC TAG

 Introduced during HTML 5 version.

Tag Name itself helps the user(developer) and browser to understand what kind of content is present under the Tag

(E.g)  table,form,heading tags

 

Non –Semantic Tag – Div,Span

 

Article vs Section vs Div Tags

Div tag is non – semantic tag ;so we can group any content inside the div tag;

Section & Article tags are semantic Tag

Section tag – All the content under section tags will discuss about the same topic

Article – Section can be used under Article Tag Different article tag discuss about different topics

Best Place to use Section & Article Tag is  Newspaper


Comments

Post a Comment

Popular posts from this blog

CODEKATA BITWISE

Given a number N and an array of N elements, find the Bitwise XOR of the array elements. Input Size : N <= 100000 Sample Testcase : INPUT 2 2 4 OUTPUT 6   // ONE TESTCASE PASSED const   readline  =  require ( "readline" ); const   inp  =  readline . createInterface ({    input :   process . stdin }); const   userInput  = []; inp . on ( "line" , ( data )  =>  {    userInput . push ( data ); }); inp . on ( "close" , ()  =>  {    var   N  =  Number ( userInput [ 0 ]);    var   str  = String ( userInput [ 1 ])    var   arr  =  str . split ( ' ' ). map (( val ) => Number ( val ))       var   first  =  arr [ 0 ]       for ( i = 1 ; i < N ; i ++)   {  first  = first ^ arr [ i ]}    console . log ( first ...
Post a Comment
Read more

DATA BASE

  DATA BASE Backend deals with Server and Data Base CLOUD COMPUTING Cloud – Cloud Computing -- Rented Computer Service Ram, Processor, OS, Storage WHY WE PREFER CLOUD COMPUTING 1. Capital Investment (at initial stage renting is better than purchasing) 2. Maintenance Problem (Power Backup, Hard Disk, Upgrade) 3. Easily Swappable (Scale Up & Scale Down) (festival time ecommerce need extra storage and facilities after that it may need less, College websites during exam time (E.g)   Anna university website ,recent time – income tax website – pan card & aadhar card linking) 4.   Don’t need any separate place to keep those Systems. TOP COMPANIES AWS – Amazon Web Service - Netflix GCP – Google Cloud Platform Azure - Microsoft Azure WHY LINUX PREFERRED THAN OTHER OS Linux, Windows, Mac 1. Open Source 2.   Secure than Windows & Mac. 3. Command Line Usage In the Linux OS, the command line is a very handy and powerful tool used for...
Post a Comment
Read more

DAY 15 - AUG 08

  DOM – DOCUMENT OBJECT MODE   HTML DOC –Browser – Browser Engine(html parser) – DOM   Tree structure takes less time for searching that’s why we prefer tree structure in DOM. Why we prefer object model? Object model means OOPS concept based it have features like data abstraction, encapsulation…. Window   -- Window is the default thing available in the Browser’s JavaScript Engine. Document -- Document is property of Window Screen – Physical dimension of   the browser   Draw some sampl tree We can create html with the help of tag and make it dynamic(to do some action) by adding   javascript   using script tag then why specifically we need this dom à Will understand in future classes that we can’t do something directly with the tag.   DOM MANIPULATION   var element =document.createElement(‘tag’) Element.setAttribute(“attribute”,”name”) If we have morethan one same attribute for the element we can’t use s...
Post a Comment
Read more