Scribd Logo
Upload

Welcome to Scribd!

  • Intoduction To HTML

    Uploaded by

    Aishwariya Budhrani
    18 views26 pages
    HTML is a markup language used to structure and present content on the web. It uses tags to define headings, paragraphs, lists, links, images and other elements. Some key HTML elements include <h1> for main headings, <p> for paragraphs, <ul> for unordered lists, <a> for links, <img> for images, and <table> to define tables. HTML documents have a basic structure including <html>, <head> and <body> tags. CSS can be used to style and lay out HTML elements. Forms and input fields allow users to enter data using elements like <input>, <select> and <textarea>.

    Original Description:

    Original Title

    Intoduction to HTML.pptx

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, 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 structure and present content on the web. It uses tags to define headings, paragraphs, lists, links, images and other elements. Some key HTML elements include <h1> for main headings, <p> for paragraphs, <ul> for unordered lists, <a> for links, <img> for images, and <table> to define tables. HTML documents have a basic structure including <html>, <head> and <body> tags. CSS can be used to style and lay out HTML elements. Forms and input fields allow users to enter data using elements like <input>, <select> and <textarea>.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    18 views26 pages

    Intoduction To HTML

    Uploaded by

    Aishwariya Budhrani
    HTML is a markup language used to structure and present content on the web. It uses tags to define headings, paragraphs, lists, links, images and other elements. Some key HTML elements include <h1> for main headings, <p> for paragraphs, <ul> for unordered lists, <a> for links, <img> for images, and <table> to define tables. HTML documents have a basic structure including <html>, <head> and <body> tags. CSS can be used to style and lay out HTML elements. Forms and input fields allow users to enter data using elements like <input>, <select> and <textarea>.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    of 26

    Introduction to HTML

    What is HTML?
    • HTML stands for Hyper Text Markup Language.
    • It is used to design web pages using markup language.
    • HTML is the combination of Hypertext and Markup language.
    • Hypertext means that the document contains links that allow the reader to
    jump to other places in the document or to another document altogether.
    • A Markup Language is a way that computers speak to each other to control
    how text is processed and presented.

    To do this HTML uses two things: tags and attributes.


    The History of HTML
    HTML VERSION YEAR
    HTML 1.0 1991
    HTML 2.0 1995
    HTML 3.2 1997
    HTML 4.01 1999
    XHTML 2000
    HTML 5 2014
    Why to Learn HTML?
    • Create Web site - You can create a website or customize an existing
    web template if you know HTML well.
    • Become a web designer - If you want to start a carrer as a
    professional web designer, HTML and CSS designing is a must skill.
    • Understand web - If you want to optimize your website, to boost its
    speed and performance, it is good to know HTML to yield best results.
    • Learn other languages - Once you understands the basic of HTML
    then other related technologies like javascript, php, or angular are
    become easier to understand.
    Applications of HTML
    • Web pages development - HTML is used to create pages which are
    rendered over the web. Almost every page of web is having html tags in it
    to render its details in browser.
    • Internet Navigation - HTML provides tags which are used to navigate from
    one page to another and is heavily used in internet navigation.
    • Responsive UI - HTML pages now-a-days works well on all platform,
    mobile, tabs, desktop or laptops owing to responsive design strategy.
    • Offline support HTML pages once loaded can be made available offline on
    the machine without any need of internet.
    • Game development- HTML5 has native support for rich experience and is
    now useful in gaming developent arena as well.
    What are Tags and Attributes?
    • Tags are used to markup the start of an HTML element and they are
    usually enclosed in angle bracket.
    • Attribute contain additional pieces of information. Attributes take the
    form of an opening tag and additional info is placed inside.

    • For example :
    <tag attribute=“ ”></tag>
    HTML Page Structure
    • <DOCTYPE! html>: This tag is used to tells the HTML version. This
    currently tells that the version is HTML 5.
    • <html>: This is called HTML root element and used to wrap all the
    code.
    • <head>: Head tag contains metadata, title, page CSS etc. All the HTML
    elements that can be used inside the <head> element are:
    • <style>
    • <title>
    • <base>
    • <noscript>
    • <script>
    • <meta>
    • <title>
    • <body>: Body tag is used to enclosed all the data which a web page
    has from texts to links. All of the content that you see rendered in the
    browser is contained within this element.
    HTML Headings
    • HTML headings are defined with the <h1> to <h6> tags.

    • <h1> defines the most important heading. <h6> defines the least
    important heading.

    Headings Are Important :-


    • Search engines use the headings to index the structure and content of
    your web pages.
    • Users often skim a page by its headings. It is important to use headings
    to show the document structure.
    HTML Paragraphs
    • HTML paragraphs are defined with the <p> tag.
    • HTML <pre> Element:-
    • The HTML <pre> element defines preformatted text.
    • The text inside a <pre> element is displayed in a fixed-width font (usually
    Courier), and it preserves both spaces and line breaks.
    HTML Comment Tags
    • You can add comments to your HTML source by using the following
    syntax:

    • <!-- Write your comments here -->


    HTML - Fonts
    • HTML <font> tag to add style, size, and color to the text on your
    website. You can use a <basefont> tag to set all of your text to the
    same size, face, and color.
    • Attributes : -
    • Set Font Size - size
    • Setting Font Face - face
    • Setting Font Color - color
    HTML Links
    • HTML links are defined with the <a> tag.
    • The link's destination is specified in the href attribute.
    HTML Links - The target Attribute
    • The target attribute specifies where to open the linked document.
    • The target attribute can have one of the following values:

    • _blank - Opens the linked document in a new window or tab


    • _self - Opens the linked document in the same window/tab as it was clicked
    (this is default)
    • _parent - Opens the linked document in the parent frame
    • _top - Opens the linked document in the full body of the window
    • framename - Opens the linked document in a named frame
    HTML Images
    • Use the HTML <img> element to define an image
    • Use the HTML src attribute to define the URL of the image
    • Use the HTML alt attribute to define an alternate text for an image, if
    it cannot be displayed
    • Use the HTML width and height attributes to define the size of the
    image
    HTML Lists
    • HTML lists are defined with the
    • <ul> (unordered/bullet list) followed by <li> tags (list
    • <ol> (ordered/numbered list) tag items)

    • Use the HTML <dl> element to define a description list


    • Use the HTML <dt> element to define the description term
    • Use the HTML <dd> element to describe the term in a description list
    • Lists can be nested inside lists
    • List items can contain other HTML elements
    HTML Lists Type
    • Unordered :
    • disc Sets the list item marker to a bullet (default)
    • circle Sets the list item marker to a circle
    • square Sets the list item marker to a square
    • none The list items will not be marked
    • Ordered :
    • type="1" The list items will be numbered with numbers (default)
    • type="A" The list items will be numbered with uppercase letters
    • type="a" The list items will be numbered with lowercase letters
    • type="I" The list items will be numbered with uppercase roman numbers
    • type="i" The list items will be numbered with lowercase roman numbers
    • Control List Counting : start
    Empty HTML Elements
    • HTML elements with no content are called empty elements.

    • <br> is an empty element without a closing tag (the <br> tag defines a
    line break)
    HTML Style Attribute
    • Setting the style of an HTML element, can be done with the style
    attribute.
    • The HTML style attribute has the following syntax:
    • <tagname style="property:value;">

    • Background Color - background-color


    • Text Color - color
    • Fonts - font-family
    • Text Size - font-size
    • Text Alignment - text-align
    HTML Text Formatting
    • Formatting elements were designed to display special types of text:
    • <b> - Bold text
    • <strong> - Important text
    • <i> - Italic text
    • <em> - Emphasized text
    • <mark> - Marked text
    • <small> - Small text
    • <del> - Deleted text
    • <ins> - Inserted text
    • <sub> - Subscript text
    • <sup> - Superscript text
    HTML Table
    • The HTML <table> element to define a table
    • The HTML <tr> element to define a table row
    • The HTML <td> element to define a table data
    • The HTML <th> element to define a table heading
    • The HTML <caption> element to define a table caption
    • Cells that Span Many Columns - colspan
    • Cells that Span Many Rows - rowspan
    HTML Forms
    • The HTML <form> element defines a form that is used to collect user
    input.
    • The <input> element is the most important form element.
    • The <input> element can be displayed in several ways, depending on
    the type attribute like :-
    • Text Input - <input type="text">
    • Radio Button Input - <input type="radio">
    • The Submit Button - <input type="submit">
    • Input Type Password - <input type="password">
    • Input Type Reset - <input type="reset">
    • Input Type Checkbox - <input type="checkbox">
    HTML Form Elements
    • The <input> Element :
    • The <input> element can be displayed in several ways, depending on the type
    attribute.
    • The <select> Element
    • The <select> element defines a drop-down list.
    • The <textarea> Element
    • The <textarea> element defines a multi-line input field (a text area)
    • The rows attribute specifies the visible number of lines in a text area.
    • The cols attribute specifies the visible width of a text area.
    • The <button> Element
    • The <button> element defines a clickable button
    HTML Iframes
    • An iframe is used to display a web page within a web page.
    • Iframe Syntax:-
    • <iframe src="URL"></iframe>
    • Target for a Link :-
    • When the target of a link matches the name of an iframe, the link will open in
    the iframe.
    HTML Quotation and Citation Elements
    • HTML Quotation and Citation Elements:
    • The HTML <q> element defines a short quotation.
    • HTML <blockquote> for Quotations:
    • The HTML <blockquote> element defines a section that is quoted from another source.
    • HTML <abbr> for Abbreviations:
    • The HTML <abbr> element defines an abbreviation or an acronym.
    • HTML <address> for Contact Information:
    • The HTML <address> element defines contact information (author/owner) of a document or an
    article.
    • The <address> element is usually displayed in italic. Most browsers will add a line break before
    and after the element.
    • HTML <cite> for Work Title:
    • The HTML <cite> element defines the title of a work.
    • HTML <bdo> for Bi-Directional Override:
    • The HTML <bdo> element defines bi-directional override.
    • The <bdo> element is used to override the current text direction
    THANK YOU

    You might also like