Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • HTML Tags: Prepared by Shahzeb Khan

    Enviado por

    pari
    60 visualizações18 páginas
    Tags of HTML

    Título original

    Lecture 4 - HTML Tags

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento
    Tags of HTML

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    60 visualizações18 páginas

    HTML Tags: Prepared by Shahzeb Khan

    Enviado por

    pari
    Tags of HTML

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 18

    HTML Tags

    Prepared by Shahzeb Khan


    HTML Tags
    • An HTML Tag (Sometimes an HTML Element) starts with
    character “<” followed by an element name and ends with character
    “>”.
    • These characters are called angle brackets.
    <tagname> content goes here... </tagname>
    • HTML tag affects the contents coming between the opening and
    closing tags.
    • Now we will discuss some basic formatting tags with examples:
    Basic Tags for a Web Page
    • Document Type Tag:
    • The <!DOCTYPE> declaration must be the very first thing in your HTML
    document, before the <html> tag.
    • The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to
    the web browser about what version of HTML the page is written in.
    Example: <!DOCTYPE HTML>
    • HTML Tag:
    • The <HTML> tag tells the browser that this is an HTML document.
    • It represents the root of an HTML document.
    • It is the container for all other HTML elements (except for the <!DOCTYPE>).
    • It consists of two main elements: <Head> and <body>.
    Example: <HTML> other HTML elements </HTML>
    HTML Elements
    • Head Tag:
    • The <head> element is a container for all the head elements.
    • It can include a title for the document, scripts, styles, meta information,
    and more.
    • Example: <body> (Body Elements) </Body>
    • The following head elements can go inside the <head> element:
    <title>
    <style>
    <link>
    <script>
    etc.
    Head Elements
    • Title Tag:
    • The <title> element defines a title for your HTML document.
    • The <title> element:
    • defines a title in the browser toolbar
    • provides a title for the page when it is added to favorites
    • displays a title for the page in search-engine results
    Example: <Title> My Web Page.</Title>
    Head Elements
    • Style Tag:
    • The <style> tag is used to define style information (CSS) for an HTML
    document.
    Example: <style> (CSS Code) </style>
    • Link Tag:
    • The <link> tag defines a link between a document and an external
    resource (e.g. CSS Style Sheet).
    Example:
    <link rel="stylesheet" type="text/css“ href="theme.css">
    • Script Tag:
    • The <script> tag is used to define a client-side script (JavaScript).
    Example: <script> (JavaScript Code) </script>
    HTML Elements
    • Body Tag:
    • The <body> tag defines the document's body.
    • It contains all the contents of an HTML document, such as text,
    hyperlinks, images, tables, lists, etc.
    Example: <body> (Body Elements) </Body>
    • The following body elements can go inside the <head> element:
    <p>
    <img>
    <Table>
    <Audio>
    <Video>
    etc.
    Body Elements
    • Paragraph Tag:
    • The <p> element defines a paragraph.
    • It has a start tag <p> and an end tag </p>.
    Example: <p> My first paragraph.</p>
    • Preformatted Tag:
    • The <pre> tag defines preformatted text.
    • Text in a <pre> element is displayed in a fixed-width font (usually
    Courier), and it preserves both spaces and line breaks.
    Example: <pre> A paragraph with Spaces. </pre>
    Body Elements
    • Italic Tag:
    • The <i> tag is used to display text in italic.
    • The <em> tag can also italicize text but it also denote text emphasis.
    Example: <i> text in italic </i>
    • Bold Tag:
    • The <b> tag specifies bold text without any extra importance.
    • We can also bold text by the <strong> tag but it denote importance of
    a text.
    Example: <b> This text will be bold.</b>
    <strong> This text will be bold.</strong>
    Body Elements
    • Subscript and Superscript Tag:
    • The <sub> tag defines subscript text (e.g. H2O).
    • The <sup> tag defines superscript text (e.g. x3).
    Example: H <sub> 2 </sub> O
    Example: x <sup> 3 </sup>
    • Heading Tags:
    • The <h1> to <h6> tags are used to define HTML headings.
    • <h1> defines the most important heading and <h6> defines the least
    important heading.
    Example: <h1> Most important text with largest size </h1>
    <h2> Less important text with smaller size </h2>
    <h6> Least important text with smallest size </h6>
    Body Elements
    • Delete Tag:
    • The <del> tag defines text that has been deleted from a document while
    the <ins> tag defines a text that has been inserted into a document.
    • The effect of <ins> tag is invisible.
    • The <s> tag specifies text that is no longer correct, accurate or relevant.
    • Effect of the <del> and <s> tags are the same. (e.g. Blue Red)
    Example: <del> Blue </del> <ins> Red </ins>
    • Highlight Tag:
    • The <mark> tag defines marked or highlight text. (e.g. Highlighted Text)
    Example: <mark> Highlighted </mark> Text
    Body Elements
    • Horizontal rule Tag:
    • The <hr> tag defines a thematic break in an HTML page or to separate
    content.
    • The browser actually draws a horizontal line where it is encountered.
    • It is a singular tag and it has no ending tag.
    Example: <p> text above </p> <hr> <p> text below </p>
    • Line Break Tag:
    • The <br> tag inserts a single line break.
    • It is a singular tag which means that it has no end tag.
    Example: <p> before break </p> <br> <p> after break </p>
    Body Elements
    • Abbreviation Tag:
    • The <abbr> tag defines an abbreviation or an acronym, like "HTML",
    "ASAP", “CSS".
    • Its effect is not shown in the browser but marking up abbreviations can
    give useful information to browsers, translation systems and search-
    engines.
    Example: <abbr> HTML </abbr>
    • Center Tag:
    • The <center> tag is used to center-align text.
    • This tag is not supported in HTML5.
    Example: <center> center-aligned Text </center>
    Body Elements
    • Quotation Tag:
    • The <q> tag defines a short quotation and insert quotation marks around
    the quotation. (e.g. “This is a quote”)
    • Use <blockquote> to mark up a section that is quoted from another
    source and the browser will indent <blockquote> elements.
    Example: <q> This is a quote </q>
    <blockquote> This is a blockquote </blockquote>
    • Code Tag:
    • The <code> tag defines a piece of computer code.
    • Most browsers display the <code> element with monospace font-family.
    Example: <code> int x = 4; </code>
    Body Elements
    • Details Tag:
    • The <details> tag specifies additional details that the user can view or
    hide on demand and we can put any sort of content inside the
    <details> tag.
    • By default, heading is Details but we specify a heading using <summary>.
    • The <summary> tag is used to specify a visible heading for the details.
    • The heading can be clicked to view/hide the details.
    Example:
    <details>
    <summary> Copyright 1999-2018 </summary>
    <p> by W3Schools.com All Rights Reserved </p>
    <p> All contents are property of the w3schools </p>
    </details>
    Body Elements
    • Button Tag:
    • The <button> tag defines a clickable button.
    • Inside a <button> element you can put content, like text or images.
    Example: <Button> Click Me </Button>
    • Progress Tag:
    • The <progress> tag represents the progress of a task.
    • In plain HTML, it is a static bar but we can use the <progress> tag in
    conjunction with JavaScript to display the progress of a task.
    Example: Downloading: <progress value="22" max="100">
    </progress>
    Body Elements
    • Meter Tag:
    • The <meter> tag defines a scalar measurement within a known range, or a
    fractional value. This is also known as a gauge. (e.g. Disk usage)
    • The <meter> tag should not be used to indicate progress (as in a progress
    bar).
    • It has certain important attributes shown in the following example:
    Example: <meter low="20" optimum="60" high="90“
    min="0" max="100" value="20"> </meter>
    low and high attribute specifies low and high values
    optimum attribute specifies optimum value for the gauge
    min attribute specifies the minimum value of the range
    max attribute specifies the maximum value of the range
    value attribute specifies the current value of the gauge
    Body Elements
    • Font Tag:
    • The <font> tag specifies the font face, font size, and color of text:
    Example:
    <font size="2" face="verdana" color="green"> Text </font>
    <font size=“3" face=“arial" color="green"> Text </font>
    <font size=“7" face=“sans serif" color="green"> Text </font>

    size attribute takes value from 1 upto 7.


    face attribute takes name of a font.
    color attribute specifies color for the text.
    We can also align the text by using align attribute, which has four values:
    Left (by default), right, center, or justify.

    Você também pode gostar