HTML Tutorial for beginners | Start easy way to learn | HTML basic codes |

Today We will discuss HTML Coding (Hypertext markup language).

 Let’s start to learn,



     1. History of  HTML



    1989
    ----Tim Berners-Lee invented www

    1991---- Tim Berners-Lee invented HTML

    1993-----Dave Raggett drafted HTML+

    1995-----HTML Working Group defined HTML 2.0

    1997-----W3C Recommendation: HTML 3.2

    1999----W3C Recommendation: HTML 4.01

    2000----W3C Recommendation: XHTML 1.0

    2008--- WHATWG HTML5 First Public Draft

    2012----WHATWG HTML5 Living Standard

    2014----W3C Recommendation: HTML5

    2016
    ----W3C Candidate Recommendation: HTML 5.1

    2017----W3C Recommendation: HTML5.1 2nd Edition

    2017-----W3C Recommendation: HTML5.2




    Moving text in Blogger by using HTML?

     

    2. What is HTML ?

    HTML stands for Hypertext markup language.

    It is the standard markup language.

     It is used for creating Web pages




     




                                Element         
        Start tag         content          End tag 
     

     <tagname> Content goes here...</tagname>


    HTML Elements:-

    Heading tag ( include stating tag and closing tag)
    Paragraph tag  ( include stating tag and closing tag)

    3. Applications of HTML


    • Web pages development
    • Game development
    • Responsive UI
    • Internet Navigation

    4. Where can we learn HTML ?

    Learn HTML Using Notepad for window pc Learn HTML Using TextEdit for Mac Follow the steps below to create your first web page with Notepad or TextEdit.

     Step 1: 
    Open Notepad (PC
    Click window button +R 
     Type Notepad. 




     Step 1:
    Open TextEdit (Mac
    Open Finder > Applications > TextEdit 

     Step 2:
     Write Some HTML Write or copy the following HTML code into Notepad:
     

    Where can we learn HTML





     Step 3:

     Save the HTML Page Save the file on your computer. Select File > Save as in the Notepad menu. 

     Name the file "index.htm" and set the encoding to UTF-8 files.

     View in Browser

    how to save html in notepad








    HTML Tutorial for beginners
    Page structure

    • The yellow area Section will be displayed in a browser, Which contents inside the <body> section
    • The green area (title) Section will be displayed in a browser's title bar

    5. Use of Web Browsers



    The use of a web browser is to read HTML documents and display them correctly.

    some browser-Chrome,  Firefox, Safari



    6. HTML Code for Documents

    All HTML documents must start with a document type declaration: <!DOCTYPE html>.





    7. HTML Code for Headings

    Headings are characterized with the <h1> to <h6> tags.

    <h1> is the main heading. 

    <h6> is the least important heading.

    Example
    ------------------------------------------
    <h1> This is a Heading 1 </h1>
    <h2> This is a Heading 2 </h2>
    <h3> This is a Heading 3 </h3>
    <h4> This is a Heading 4 </h4>
    <h5> This is a  Heading 5 </h5>
    <h6> This is a  Heading 6 </h6>
    ------------------------------------------


    Note: 
    Browsers automatically add some white blank (a margin before and after a heading)

    Headings Are Important most important for search engines (Google, Bing)

    Search engines use the headings to index the structure and content of your web pages.

    Headings  play the main role in SEO ( Search Engine Optimization )

    Each HTML heading has a default size.

    You can specify a size for any title with the help of the style attribute and CSS font-size property



    Example

    <h1 style="font-size:60px;">This is a Heading 1</h1>



    8. HTML code for Paragraphs

    < p > tag  defines a paragraph.
    < p > is starting tag of paragraph

    </p> is closing(ending) tag  of paragraph

    Browsers automatically add some white blank (a margin before and after a paragraph.)


    Example
    ------------------------------------------
    <p> This is a paragraph.</p>
    <p> This is 2nd paragraph.</p>
    ------------------------------------------


    • Some following tags, which is very important in paragraph

    Tag        Description
    <hr>     Defines a thematic change in the content
    <br>     Inserts a single line break
    <pre>   Defines pre-formatted text


    (a). Describe <hr> tag



    <hr> use to thematic break in an HTML page (horizontal line)

     <hr>  It has no require end tag( closing tag)



    Example
    ------------------------------------------
    <h1>
    This is heading 1</h1>
    <p>paragraph some text.</p>
    <hr>
    <h2>This is heading 2</h2>
    <p>paragraph some other text.</p>
    <hr>
    ------------------------------------------





    (b). Describe <br> tag


    <br>  use to line break (without starting a new paragraph)

     <br>  It has no require end tag( closing tag)



    Example
    -------------------------------------------------------------
    <p>
    This is<br>a paragraph<br>with line breaks.</p>
    -------------------------------------------------------------
    Run code

    This is
    a paragraph
    with line breaks


    (c). Describe <pre> tag




    <pre> element defines preformatted tex,displayed in a fixed-width font (preserves  spaces and line breaks)

     <pre> tag has  require end tag( closing tag) </pre>

    Example
    ------------------------------------------
    <pre>
    Twinkle, twinkle, little star,

    How I wonder what you are!

    Up above the world so high,

    Like a diamond in the sky.
    </pre>
    ------------------------------------------

    Run code result

    Twinkle, twinkle, little star,

    How I wonder what you are!

    Up above the world so high,

    Like a diamond in the sky.



    9. HTML Attributes

    • href Attribute or HTML Links
    • src Attribute or HTML Images
    • alt Attribute
    • width and height Attributes
    • title Attribute
    • style Attribute
    • lang Attribute


    (a). Href Attribute or HTML Links

     <a> --tag use to defines a hyperlink. 
    href --Specifies the URL of the page to which the link goes:

    Example:
    ------------------------------------------------------------
    <a href="https://www.pktric.club">pktric</a>
    ------------------------------------------------------------





    (b). Src Attribute or HTML Images


    <img> tag is used to embed an image in an HTML page.

    src attribute specifies the path to the image to be displayed

     Two ways to specify the URL in the src attribute



    Example
    ------------------------------------------------------------
    <img src="img_girl.jpg">
    ------------------------------------------------------------

    • This attribute Links to an image that is hosted within the website
    • They will not break if you change the domain.


    Example
    --------------------------------------------------------------
    <img src="https://www.pktric.club/images/img_girl.jpg">
    ---------------------------------------------------------------


    In this attribute Links to an image that is hosted on another  website





    (c). Alt Attribute


    Google is unable to read the photo. so we use alt tag to tell what is in the photo, 


    HTML-alt-Attribute



    Example:
    ---------------------------------------------------------------
    <img src="img_baby.jpg" alt="Baby with a chocolate">
    ---------------------------------------------------------------



    (d). Width and Height Attributes

    This tag specifies the width and height of the image (in pixels):


    Example
    ---------------------------------------------------------------
    <img src="img_baby.jpg" width="300" height="400">
    ---------------------------------------------------------------



    (e). Title Attribute


    (f). Style Attribute

    This attribute is used to add styles to an element (color, font, size )

    Example
    ---------------------------------------------------------------
    <p style="color:red;">This is a  paragraph.</p>
    ---------------------------------------------------------------




    (g). lang Attribute

     lang attribute should be always inside the <html> tag.

    It is used to declare the language of the Web page


    Example
    ------------------------------
    <!DOCTYPE html>
    <html lang="en">
    <body>
    ...
    </body>
    </html>
    ------------------------------

    Post a Comment

    0 Comments