Scribd Logo
Upload

Welcome to Scribd!

  • HTML_Basic Elements (1)

    Uploaded by

    sanjayjangid500sj
    2 views9 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    2 views9 pages

    HTML_Basic Elements (1)

    Uploaded by

    sanjayjangid500sj

    Copyright:

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

    Basic HTML Elements

    Introduction:
    HTML stands for Hyper Text Markup Language. It is the standard markup language for developing
    web pages. It describes the structure of a web page. It helps a browser understand the structure
    and style of a document or files for viewing over the internet. It allows to display information with
    the help of audio, video, images, animation and other supportive media.
    History:
    HTML was first introduced in 1989 by Tim Berners-Lee, the creator of the World Wide Web.
    Berners-Lee originally created the web to allow others to collaborate with each other and share
    their work. HTML is originally created from SGML (Standard General Markup Language). The
    latest version of it is HTML 5 which was released in 2014.
    Few Important Points:
    1. HTML tags are predefined and are not case-sensitive.
    2. All HTML tags are typed inside the angular brackets (< and >) and the text between these
    brackets are called elements.
    3. The opening tags are written within the less than (<) and greater than (>) signs,
    4. e.g. <HTML>
    5. The closing tags are written within the < and > signs with a forward slash (/) appended
    before the name of the tag.
    6. e.g. </HTML>
    7. The attributes are always specified in the opening tags, which provides additional
    information about that tag. It comes in name/value pairs like name = “value”,
    8. e.g. <FONT size =“5”>
    Basic Terminology:
    1. Web Browser: A computer application used to access information on the World Wide Web
    is called a web browser. When a user requests some information, the web browser receives
    the data from the web server and then displays the webpage on the user's screen.
    2. Text Editor: A text editor is any word processing program that we can use to type and edit
    text. We can easily create web pages by writing HTML code in a simple text editor like
    Notepad.
    3. Tag: A HTML tag is like keyword which defines that how web browser will format and
    display the content. With the help of tags, a web browser can distinguish between an HTML
    content and a simple content. HTML tags contain three main parts: opening tag, content
    and closing tag. But some HTML tags are unclosed tags. A tag must be enclosed within < >
    the brackets.
    4. Attribute: HTML attributes are special words which provide additional characteristics or
    information about the elements. They are always specified in the start tag. Each element
    or tag can have attributes, which defines the behaviour of that element.

    1|Page
    5. Element: An HTML element is a component of an HTML document that tells a web browser
    how to structure and interpret a part of the HTML document. HTML elements can contain
    formatting instructions, semantic meaning, and content.
    HTML Document Structure:
    The general structure of an HTML document has two sections: Head and Body.

    Head Section: This Head section contains the contents general information about the document.
    The head section contains the tags that define the header of the document usually displayed on
    the top of the browser.
    Body Section: The body section contains the content to be displayed on the web page. This is an
    area in web page that includes text, graphics and other HTML elements that provide control and
    formatting effects to a page like font, paragraph, list and other elements. This tag is given below
    the closing </Head> tag.
    Element Types of Body Section
    There are two basic categories of HTML elements used in the body section:
    1. Block-level elements: These elements take up the full width available and by default, begin
    on a new line. These elements include tags like: Paragraph <P>, Heading <H1>, Horizontal
    rule <HR> and Centering <CENTER>.
    2. Text-level elements: Text level elements are used to markup the bits of text, including
    changing the text appearance or creating hyperlinks. They do not start on a new line and
    only take up as much width as necessary. These elements include tags like: Bold<B>, Italics
    <I> and Line break <BR>.
    Container tag

    2|Page
    Container tag consists of opening tag + content + closing tag. They are used to enclose texts and
    images. Container tag always comes with content. These tags are generally divided into three
    parts, i.e., opening tag, content (which will display on the browser), and closing tag. In the content
    part, they can also contain some other tags. These opening and closing tags are used in pairs
    which are start tag and end tag, which is often called ON and OFF tags. If you forget to close the
    container tag, the browser applies the effect of the opening tag until the end of the page.
    Empty Tag
    The tags that do not contain any closing tags are known as empty tags. Empty tags contain only
    the opening tag but they perform some action in the webpage. They are used to insert the content
    or effect.
    Some Important Tags are:
    1. <!Doctype> tag: The <!DOCTYPE> declaration is included at the beginning of an HTML
    document. The <!DOCTYPE> declaration is not an HTML tag; rather it is an instruction to
    the web browser to indicate what version of HTML is used in the document.
    2. <HTML lang="en">: This tag specifies the language used in the document. Typically, web
    pages are written in the English language (lang="en"). Nowadays other languages are also
    used to design web pages for which this tag is used.
    3. <META> tag: The META elements can be used to include name/value pairs describing
    properties of the HTML document, such as author, expiry date, a list of keywords,
    document author etc. It is used to provide such additional information. This tag is an empty
    element and so does not have a closing tag, but it carries information within its attributes.
    We can include one or more meta tags in our document based on what information we
    want to keep in our document. In general, meta tags do not impact physical appearance of
    the document.
    4. <P> tag: It is used to display a long piece of text on a web browser, which marks a block of
    text as a paragraph. To mark the end of a paragraph, </P> tag is used. It defines a
    paragraph. Browsers automatically add a single blank line before and after each <p>
    element. A paragraph can be aligned using the align attribute. By default, the paragraph
    tag aligns the text to the left. Other alignment options are: Right, Center and Justify.
    5. Font Tag: Fonts play a very important role in making a website more user friendly and
    increasing content readability. The <font> tag is used to change the size, color and type
    face of the text on HTML page. The font tag is having three attributes called size, color, and
    face to customize data.
    a. Face: We can change the font style by using face attribute. Here one important point
    needs to be remembered is if the user viewing the page doesn't have the font installed,
    they will not be able to see it. Instead, users will see the default font face applicable to
    the user's computer.
    b. Color: We can set content font size using size attribute. The range of accepted values is
    from 1(smallest) to 7(largest). The default size of a font is 3.
    c. Size: The color attribute is used to set any font color we like. We can specify the color
    that you want by either the color name or hexadecimal code for that color.
    3|Page
    6. Heading Tag: A HTML heading tag can be defined as a title or a subtitle which we want to
    display on the webpage. When we place the text within the heading tags <h1>.........</h1>,
    it is displayed on the browser in the bold format and size of the text depends on the
    number of headings. There are six different HTML headings which are defined with the
    <h1> to <h6> tags, from highest level h1 (main heading) to the least level h6 (least
    important heading).
    7. HR tag: The <hr> tag in HTML stands for horizontal rule and is used to insert a horizontal
    rule or a thematic break in an HTML page to divide or separate document sections. The
    <hr> tag is an empty tag, and it does not require an end tag. This tag has the following
    attributes:
    ▪ Align: Sets the alignment of the rule on the page. If no value is specified, the default
    value is left. Other values are right and center.
    ▪ Color: Sets the color of the rule through color name or hexadecimal value.
    ▪ Width: Sets the length of the rule on the page through a pixel or percentage value.
    ▪ Size: Sets the height, in pixels, of the rule.
    ▪ No shade: Sets the rule to have no shading. Produces a 2-D dark gray line.
    8. Center tag: This tag is used to centre align the part of the text to the center of the webpage.
    It is a container tag and any anything which is placed between the opening and closing tag
    such as text, image or tables etc will be placed in the center of the browser window.
    9. Comment Tag: In HTML, a comment is text enclosed within a <!╌> tag. This syntax tells the
    browser that they are comments and should not be displayed to the user. This is a helpful
    technique for programmers to keep their personal notes about the source of the website.
    10. Pre tag: The <pre> HTML element represents pre-formatted text that is to be rendered
    exactly as it is written in the HTML file. Text is usually presented using a monospaced, font.
    The empty space inside this element is displayed in writing.
    11. Basefont Tag: The <basefont> tag was used in HTML to specify a default text-color, font-
    size or font-family for all the text in an HTML document. Its attributes are similar to the
    <font> tag. In the latest version of the browser, this tag displays no effect.
    12. <BR> tag: This is used to break a line and displays the proceeding text in the next line
    without giving any space between the two lines. It should be given at the end of that line
    after which a new line is required.

    13. List Tag: Lists are an important part of a document. It adds functionality to understand the
    content clearly. It is the most efficient way to represent information in an accurate way.
    HTML supports various elements that are used to create a list to display the items in a
    specific order. It provides three types of lists:
    ▪ Ordered List (OL): In this type, all the list items are marked with countable items
    like numbers, letters etc. It is also known as numbered list. The ordered list starts
    with the <ol> tag and ends with </ol>. Every new item can be added with <li> tag. It
    has three attributes – Type, Start and Reversed.
    ▪ Unordered List (UL): In this, all the list items are marked with bullets. It is also known
    as bulleted list. The unordered list starts with <ul> tag and ends with </ul>. In this
    also each new list item can be added to the list using <li> tag.
    4|Page
    ▪ Definition List (DL): This list is used to write definitions or terminologies on HTML
    web page. To use this type of list, the following tags are used:
    i. DL: It is used to start and end the description list.
    ii. DT: It is used to write the term or word for the definition.
    iii. DD: It is used to write the data or descriptive text for the term.
    14. Attributes of Body Tags:
    d. Bgcolor: This attribute is used to apply or change the background color of the webpage.
    The value can be any color name or color code.
    e. Background: The background attribute is used to apply or change the background image
    of your webpage
    f. Text: This attribute changes the color of the text typed in the web page. Text that is not
    part of another element or formatting styles may be displayed with the given color.
    15. Different attributes of List tags:
    ▪ Type: This attribute specifies the type of numbering and bullets used to mark items
    in an ordered and unordered list respectively. By default, its value is 1 for ordered
    list and “Disc” for an unordered list.
    ▪ Start: This attribute specifies the start value of the first item from which an ordered
    list should start. By default, the ordered list starts from 1 but we can change its value
    as per the requirement.
    ▪ Reversed: The attribute allows a list to appear in the reverse order. It is used with
    ordered list.

    5|Page
    Attributes to the Tags
    ▪ To specify more information along with tags, additional attribute accompany the
    ▪ tags.
    ▪ In other words, attributes tell more about the elements.
    ▪ Attributes always appear on the opening tags of the elements that carry them.
    ▪ An attribute is made up of two parts:
    i. The first part is a name
    • The name of an attribute indicates the property to be set
    ii. the second part is a value.
    • The value is a value to be set to the property.
    ▪ The values should be in double quotation marks.
    ▪ Between the name and the value there should be an equal (=) sign
    ▪ Example: <body bgcolor=“yellow”> Click here </a>
    Align attribute
    6|Page
    • The align attribute indicates whether the heading appears to the left, center or right
    • of the page.
    • By default, the content is aligned to the left of the page.
    • It can take three values as follows:
    o Left: The content is aligned to the left of the page.
    o Right: The content is aligned to the right of the page.
    o Center: The content is aligned to the center of the page.
    • There are some attributes which can appear along with every tag. Such attributes are
    called universal attributes.
    o Align is such universal attribute.
    o <p align=“right”>Some content goes here</p>
    • Being a universal attribute, the align attribute can also go with heading.
    <h1 align=“center”>Some heading goes here</h1>
    Soft spaces and hard spaces in HTML
    ✓ When content given in a paragraph is aligned, some spaces are automatically added for
    adjustment. The spaces which are inserted automatically are known as soft spaces.
    ✓ If users himself (manually) inserts some spaces, such hard spaces will be automatically
    deleted unless the content is written using <pre> and </pre> tag pairs.

    1. The first version of HTML was released in 1991


    2. The first version of HTML had only 18 tags.
    3. HTML is not a programming language; it's a markup language.
    4. HTML5, introduced in 2014, added support for video and audio playback.
    5. The <marquee> tag, used for scrolling text, is obsolete in HTML5.
    6. HTML documents are saved with the .html or .htm file extension.
    7. HTML tags are not case-sensitive.
    8. The <b> tag makes text bold, but it's better to use <strong> for semantic meaning.
    9. HTML is the foundation of web development, forming the structure of web pages.
    10. HTML 5.2 is the lasted version of HTML released in December 2017.
    11. We can use over 16 million different colors in HTML by specifying hexadecimal color codes.
    For example, #FF5733 is a bright orange color.

    7|Page
    12. The World Wide Web Consortium has been managing HTML since 1996. It’s a non-profit
    organization with over 400 members and 12,000 developers who participate in the
    development of web standards based on these principles:
    a. Accessibility
    b. Privacy
    c. Internationalization
    d. Security
    13. There’s a web page for everything there is to know about HTML. We can find all the
    information about HTML standards on a single page. The page contains everything from
    the history of HTML to the latest technical specifications of this markup language. Click
    https://html.spec.whatwg.org/multipage/ to access this page.

    Questions:
    1. What is HTML?
    Or
    Write a short note on HTML?
    Or
    What is the HTML? What is the use of it?
    2. Write a short note on history of HTML.
    Or
    What is the history of HTML?
    3. Define the following
    a. Web Browser
    b. Text Editor
    c. Tag
    d. Attribute
    e. Element
    4. Differentiate between tag and attribute in context of HTML.
    Or
    What do you understand by tag and attribute in HTML?
    5. What is Head/Body section?
    Or
    Explain the use of Head/Body Section
    Or
    Differentiate between Head and Body section.
    Or
    Write a short note on Head/Body section.
    6. Differentiate between Container and Empty Tag.
    7. What is the use of Meta tag?
    8. What is the <P> tag used for?
    8|Page
    9. Write a short note on list? Explain the use of definition list with an example.
    10. Differentiate between ordered and unordered list
    11. Write a short note on the following attributes:
    a. Type
    b. Reverse
    c. Start
    12. Differentiate between bgcolor and background attributes of body tag.
    13. What is the use of <baserfont>?
    14. Why do we use <pre> tag? How is it different from <p> tag?
    15. What do you understand by comment tag?

    9|Page

    You might also like