Scribd Logo
Upload

Welcome to Scribd!

  • HTML by Ramana

    Uploaded by

    Ramana K G
    8 views31 pages
    HTML is a markup language used to define the structure and layout of web pages. It uses tags to annotate text and other content to define headings, paragraphs, lists, links, and other elements. Some key HTML elements include paragraph (<p>), heading (<h1>-<h6>), list (<ul>, <ol>, <li>), image (<img>), and link (<a>) tags. HTML documents require a skeleton structure with <html>, <head>, and <body> tags, and comments can be added with <!-- --> tags. Attributes provide additional information about elements like href for links and src for images.

    Original Description:

    super

    Original Title

    HTML BY RAMANA

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    HTML is a markup language used to define the structure and layout of web pages. It uses tags to annotate text and other content to define headings, paragraphs, lists, links, and other elements. Some key HTML elements include paragraph (<p>), heading (<h1>-<h6>), list (<ul>, <ol>, <li>), image (<img>), and link (<a>) tags. HTML documents require a skeleton structure with <html>, <head>, and <body> tags, and comments can be added with <!-- --> tags. Attributes provide additional information about elements like href for links and src for images.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    8 views31 pages

    HTML by Ramana

    Uploaded by

    Ramana K G
    HTML is a markup language used to define the structure and layout of web pages. It uses tags to annotate text and other content to define headings, paragraphs, lists, links, and other elements. Some key HTML elements include paragraph (<p>), heading (<h1>-<h6>), list (<ul>, <ol>, <li>), image (<img>), and link (<a>) tags. HTML documents require a skeleton structure with <html>, <head>, and <body> tags, and comments can be added with <!-- --> tags. Attributes provide additional information about elements like href for links and src for images.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 31

    GETTING STARTED WITH

    HTML
    BY RAMANA
    1 What is HTML? 6 HTML Elements

    2 Features of HTML 7 Basic Tags

    3 HTML Editor 8 Attributes

    4 HTML Skeleton

    5 HTML Comments

    BY RAMANA
    Agenda

    What is HTML?
    Proprietary content. ©Great Learning. All Rights Reserved. Unauthorized use or distribution prohibited

    What Is HTML ?

    Adds Design/Structure to the


    webpage

    BY RAMANA
    What is HTML?
    HTML

    ● Stands for HyperText Markup Language.

    ● HyperText: Link between web pages.

    BY RAMANA
    Features of HTML
    ● Markup Language: Text between tags that defines
    structure.

    ● It is a language to create web pages.

    ● HTML defines how the web page looks and how to


    display content with the help of elements.

    ● It forms or defines the structure of our Web Page.

    ● Need to save your file with a .html extension.

    BY RAMANA
    HTMLEditors
    Features of HTML
    ● Learning curve is very easy (easy to modify).

    ● Creating effective presentations.

    ● Adding Links wherein we can add references.

    ● Can display documents on platforms like Mac,


    Windows, Linux, etc.

    ● Adding videos, graphics, and audio making it more


    attractive.

    BY RAMANA
    ● Case insensitive language.

    HTML Editors
    ● Simple editor: Notepad

    ● Notepad++

    ● Atom

    ● Best editor: Sublime Text.

    BY RAMANA
    Notepad

    BY RAMANA
    BY RAMANA
    Notepad++

    BY RAMANA
    BY RAMANA
    Atom

    BY RAMANA
    BY RAMANA
    Sublime Text

    BY RAMANA
    BY RAMANA
    HTMLSkeleton
    HTML Skeleton
    <!DOCTYPE html>

    <html>

    <head>
    <title></title>
    </head>

    <body>

    </body>

    </html>

    BY RAMANA
    HTMLSkeleton
    <!DOCTYPE html>
    Instruction to the browser about the HTML version.

    <html>
    Root element which acts as a container to hold all the code Browser should
    know that this an HTML document Permitted content: One head tag
    followed by one body tag.

    <head>
    Everything written here will never be displayed in the browser. It contains
    general information about the document - Title, definitions of CSS and
    script sheets, and Metadata(information about the document).
    <body>

    ● Everything written here will be displayed in the browser.

    BY RAMANA
    HTML comments
    ● Contains text, images, links which can be achieved through tags.

    ● Examples:
    ○ <p> This is our first paragraph. </p>
    ○ <a href=“https://www.google.com”>Go To Google</a>
    ○ <img src="photo.jpg">

    HTML Comments
    ● Comments don’t render on the browser.

    ● Helps to understand our code better and makes it readable.

    ● Helps to debugging our code.

    ● Two ways to comment:


    BY RAMANA
    HTMLElements
    ○ Single line
    ○ Multiple line

    HTML Elements
    ● Elements are created using tags.

    ● Elements are used to define semantics.

    ● Can be nested and empty.

    Basic Structure

    <p color=”red”> This is our first Paragraph </p>

    ● Contains following things:


    BY RAMANA
    Element Types
    ○ Start tag:
    ○ Attributes :
    <p>
    color =”red”
    ○ End tag : </p> // optional
    ○ Content: This is our first Paragraph
    ● Block Level :

    ○ Takes up full block or width and adds structure in the web page.

    ○ Always starts from new line, dividing a page into coherent blocks.

    ○ These elements can contain block-level as well as inline elements.

    ○ Example :
    ■ <p>
    ■ <div>
    ■ <h1>...<h6>

    BY RAMANA
    ■ <ol> ■ <ul> ●
    Inline Level :

    ○ Takes up what is requires and adds meaning to the web page.

    ○ Always starts from where the previous element ended.

    ○ Example :
    ■ <span>
    ■ <strong>
    ■ <em>
    ■ <img>
    ■ <a>

    BY RAMANA
    Basic Tags
    Basic Tags
    ● Enclosed within <>

    ● Different tags render different meaning .

    ● <title> tag
    0 Whatever is written this tag comes up in the web page’s tab. ○ Defines the
    title of the page.
    ○ Syntax: <title>Home</title>

    ● <p> tag
    0 Defines the paragraph.
    ○ Syntax:<p > This is our first Paragraph </p>

    BY RAMANA
    List of Self closing/Empty tags
    ● <hr> tag
    ○ Stands for horizontal rule. ○ Dividing the web page.

    ● <br> tag
    ○ Stands for break line. ○ Moving to next line.

    ● <img> tag
    ○ To add images in the web page.
    ● <h1> tag …… <h6> tag
    0 Stands for heading tag.
    ○ Defines heading of a page.
    ○ h1 represents most important page in the page. ○ h6 represents least
    important page in the page.
    BY RAMANA
    Basic Tags
    ● <strong> tag
    0 Defines the text to be bold.
    ○ Replaced <b>tag //HTML5

    ● <em> tag
    0 Defines the text to be italic.
    ○ Replaced <i>tag//HTML5
    ● <ol> tag
    0 Stands for ordered list.
    ○ To define series of events that take place in some order.
    ○ Example making a tea (like a flow chart).
    ○ <ol>.........</ol>

    ● <ul> tag
    0 Stands for unordered list.
    BY RAMANA
    Basic Tags
    ○ To define series of events that take place where order is not important.
    ○ Example your hobbies.
    ○ <ul>.........</ul>
    ● <li> tag
    0 Defines the list item.
    ○ Used inside the ol and ul tag to define the events.
    ○ <li></li>

    ● <div> and <span> tags


    0 Both of these are used to group different tags .
    ○ Acts like a container.
    ○ Effective while styling.
    ○ <div>.........</div>
    ○ <span>....</span>

    BY RAMANA
    Basic Tags
    ○ Difference <div> is block level and <span> is inline level.
    ● <img> tag
    0 Used to add images in a web page. ○ Syntax: <img src=”url”> ○ Self closing
    tag.

    ● <a> tags
    0 Used to add links in a web page.
    ○ <a href=”url”> Name of the link </a>

    Attributes
    ● Properties associated with each tag.

    ● <tag name=”value”></tag> is the structure.

    BY RAMANA
    Attributes
    ● Global Attribute:
    0 Title : Add extra information(hover).
    ○ Style : Add style information(font, background, color, size).

    ● <img src=”url” width=”100”>


    0 src is the attribute used in image tag to define path.
    ○ Width is attribute used to define width in pixels. ○ Alt i.e alternate
    text if image is not loaded.

    ● <a href=”url”> Name of the link </a>


    ● href used to define path of the link

    BY RAMANA
    BY RAMANA

    You might also like