Scribd Logo
Upload

Welcome to Scribd!

  • HTML

    Uploaded by

    ZEENSTRUST
    20 views10 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
    20 views10 pages

    HTML

    Uploaded by

    ZEENSTRUST

    Copyright:

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

    BELLS UNIVERSITY OF TECHNOLOGY, OTA,

    OGUN STATE

    HTML ( HYPERTEXT MARKUP LANGUAGE )

    LEO-NKEMAKA CHIDERA IFEATU


    2020/9134

    COURSE TITLE: WORLD WIDE WEB SYSTEM


    COURSE CODE: ITP 401
    COLLEGE OF NATURAL AND APPLIED
    SCIENCES DEPARTMENT OF COMPUTER
    SCIENCE AND INFORMATION TECHNOLOGY.

    PRESENTED TO MRS. IBIDAPO


    HTML (HYPERTEXT MARKUP LANGUAGE)
    The full form of HTML is Hypertext Markup Language. It is a markup language that is used
    to create web pages. Web browsers receive HTML documents from a web server or from local
    storage and render the documents into multimedia web pages

    HTML is often assisted by technologies such as Cascading Style Sheets (CSS) and JavaScript,
    which makes the HTML beautiful and interactive, respectively. It’s better to describe the
    relationship between HTML, CSS, and Javascript using a building. In a building:

    • HTML would be the structure of the building,


    • CSS would be the cement blocks, plaster, paint, décor etc. that generally makes the
    building look like an actual building, and beautifies it,
    • While Javascript would be the things in the building that makes it functional, e.g.
    electricity, water connections etc.

    A BRIEF HISTORY OF HTML


    The most popular markup language among the developers, HTML, was started at CERN in
    1989 with the idea of creating a hypertext system for the internet by Sir Tim Berners-Lee.

    • THE FIRST VERSION OF HTML, HTML 1.0, was released in 1993. But not many of
    the developers were involved in creating websites. So the language was also not growing.
    This version only had basic tags like text, even tables and fonts were not available in this
    version.
    • THE SECOND VERSION OF THE HTML, HTML 2.0, was released in 1995, which
    contains all the features of HTML 1.0 along with a few additional features. Until the release
    of HTML 3.0, it remains the standard markup language for creating websites.
    • THE THIRD VERSION OF HTML, HTML 3.2, was released in 1997 as W3C’s first
    recommendation for HTML. This version added widely deployed features such as tables,
    text-flow around images, super-scripts & subscripts. One most important thing that was
    added in this version was the support of CSS.
    • THE FOURTH VERSION OF HTML, HTML 4.01, was released in 1999 as W3C’s
    recommendation. This version was the most successful of all previous HTML released
    versions. In this version features like multimedia, better printing features and more were
    added.
    • THE LATEST VERSION OF HTML, HTML 5, was released in 2014 as W3C’s
    recommendation. It was an extended version of HTML 4.01 published in 2012. Many new
    tags were added in this version like <header>, <footer>, <main>, <video>, etc. HTML5
    supports mathML and SVG in text.

    HTML TAGS
    HTML tags are the most basic building block of elements in HTML. HTML tags are like a
    signboard that tells the browser how to display and format content inside the tag.
    Example <p>, <header>, <footer>, etc.

    TYPES OF HTML TAGS


    There are 2 types of HTML pair-based tags;
    1. PAIRED TAGS
    These are HTML tags that have a separate opening and closing tag. Some examples include
    <p></p>, <html></html>, <body></body>, <head></head>, <a></a>, <h1></h1>,
    <form></form>, <title></title> etc.
    2. UNPAIRED TAGS
    These are HTML tags that has both its opening and closing tags in a single tag. They are
    called self-closing tags or empty tags. They do not need to be closed. Some examples
    include <img />, <br />, <input />, <hr /> etc.

    HTML BASIC TAGS


    There are lots of HTML tags, but below are the few that are mostly used, plus it’s important to
    know how to use these tags. They are:
    1. THE <!DOCTYPE> DECLARATION
    The <!DOCTYPE> declaration represents the document type, and helps browsers to
    display web pages correctly. It must only appear once, at the top of the page (before any
    HTML tags). The <!DOCTYPE> declaration for HTML5 is: <!DOCTYPE html>.
    2. HTML TAG <html>
    The <html> tag is called the root tag of an HTML document because it is the root element
    in the tree of elements of a web page. It contains all other elements of the web page
    except <!DOCTYPE>. It is defined just after doctype declaration. It has two children, head
    tag and body tag.
    3. HEAD TAG <head>
    The <head> tag lies inside <html> tag. It includes all the information related to webpage
    titles, links, scripts and meta data, style etc., but not the actual content. The information
    here is not visible to user. It is mainly for search engines and browsers.
    4. BODY TAG <body>
    The <body> tag is used to define the body of the HTML document. It lies inside the <html>
    tag after the <head> tag. Everything that you see in a webpage like paragraphs, headings,
    images, videos etc. all lies inside the <body> tag.
    5. TITLE TAG <title>
    The <title> tag is the compulsory child of <head>. It is used to give the webpage a title. A
    title is compulsory and should be unique on all webpages. Title enhances the search engine
    visibility of a webpage on various search engines.
    6. PARAGRAPH TAG <p>
    The <p> tag is used to create a paragraph in HTML document. Writing content to one <p>
    tag and then moving to the next <p> tag automatically changes the paragraph on the web
    page.
    7. HEADING TAGS
    The heading tag is used to create a heading in a webpage. There are 6 heading tags in
    HTML representing six different sizes of heading. Headings are <h1>, <h2>, <h3>, <h4>,
    <h5> and <h6>. Where <h1> is biggest in size and <h6> is smallest in size.
    8. ANCHOR TAG <a>
    An anchor tag is used to create a hyperlink to the same or different web pages. The anchor
    tag is written as <a> and the URL of the page is given in href attribute. Example: <a
    href="URL of page">Go to page</a>.
    9. FORM TAG <form>
    Within the form, you have to use different types of input to take input from the user. To
    create an input use <input> tag.
    HTML ELEMENTS
    An HTML element is defined by a start tag, some content, and an end tag. HTML elements tell
    the browser how to display specific content on web pages. Like text, images, videos, and other
    content. Example of an HTML element: <h1>My First Heading</h1>.

    HTML elements with no content are called empty elements. The <br> tag defines a line break,
    and is an empty element without a closing tag. Example: <h1>My <br> First Heading</h1>.

    HTML ATTRIBUTES
    HTML attribute is a property of an HTML element that can be used to add extra functionality
    to an element. These attributes are placed in the opening tag and range from style and ids to
    classes. Attributes usually come in name/value pairs like: name="value". Examples include:
    class, href, id, src, alt, height, weight, style, lang, title etc.

    1. HREF ATTRIBUTE
    The href attribute of <a> specifies the URL of the page the link goes to. Example:
    <a href="URL of page">Visit page</a>.
    2. SRC ATTRIBUTE
    The src attribute of <img> specifies the path to the image to be displayed. Example: <img
    src="img_girl.jpg">.
    There are two ways to specify the URL in the src attribute:
    1. Absolute URL: Links to an external image that is hosted on another website.
    2. Relative URL: Links to an image that is hosted within the website. Here, the URL
    does not include the domain name. If the URL begins without a slash, it will be
    relative to the current page. Example: src="img_girl.jpg". If the URL begins with a
    slash, it will be relative to the domain. Example: src="/images/img_girl.jpg". It is
    almost always best to use relative URLs, since they will not break if you change
    domain.
    3. WIDTH AND HEIGHT ATTRIBUTE
    The width and height attributes of <img> provide size information for images. Example:
    <img src="img_girl.jpg" width="150" height="100">.
    4. ALT ATTRIBUTE
    The alt attribute of <img> provides an alternate text for an image, if the image for some
    reason cannot be displayed. Example: <img src="img_girl.jpg" alt="Girl with a jacket">
    5. STYLE ATTRIBUTE
    The style attribute is used to add styles to an element, such as color, font, size, and more.
    6. LANG ATTRIBUTE:
    The lang attribute of the <html> tag declares the language of the Web page. This is meant
    to assist search engines and browsers. Example:
    <!DOCTYPE html>
    <html lang="en">
    <body>
    ...
    </body>
    </html>
    7. TITLE ATTRIBUTE
    The title attribute defines some extra information about an element. The value of the title
    attribute will be displayed as a tooltip when you mouse over the element. Example: <p
    title="I'm a tooltip">This is a paragraph.</p>.
    SEMANTIC HTML
    Semantic HTML means that your HTML tags convey the actual meaning of what they are used
    for. With semantic HTML, semantically-neutral tags such as <div> and <span> are frowned
    upon since semantically more descriptive tags such as <header>, <nav>, <main>, <section>,
    <footer> and <article> can do the same thing they do.

    SEMANTIC TAGS
    1. <header>
    The <header> element defines the introductory section of a web page. It contains items
    such as the logo, navigation, theme switcher, and search bar.
    2. <main>
    The <main> contains the main sections of the HTML document apart from <header> and
    <footer>. Ideally, there should be just one of these in the whole HTML document.
    3. <section>
    The <section> element defines a particular section of the web page. This may be the
    showcase section, about section, contact section, or others. You can use numerous sections
    in a single HTML document.
    4. <article>
    The <article> element represents a certain part of a web page that conveys some particular
    information. Such information could be a combination of text, images, videos, and embeds.
    5. <aside>
    As the name implies, this represents a sidebar on a web page. It is usually a part of the web
    page that is not directly related to the main content.
    6. <footer>
    The <footer> element accommodates items such as quick links, copyright information, or
    any other data related to the entire website or web page.
    HTML TEXT EDITORS
    Some HTML text editors can create the basic layout of a webpage just by writing a few keys
    or can auto close the tags or can format your text document and many more. Some of these
    editors include:

    1. Window Notepad.
    2. Notepad++.
    3. Sublime Text Editor.
    4. Visual Studio Code.

    1. WINDOWS NOTEPAD
    Notepad is a simple text editor that comes up with windows systems, which is generally
    used to create .txt files. For beginners, you can use this as an initial text editor but later you
    can switch to other better editors. The file(s) used should be saved with .html or .htm
    extension.
    2. NOTEPAD++
    Notepad++ is another simple text editor which you can download and then install to use for
    editing HTML files. The file(s) used should be saved with .html or .htm extension.
    3. SUBLIME TEXT EDITOR
    Sublime is a special HTML text editor. It is specially designed to create and edit HTML
    files. It comes with various functionalities and plugins. The file(s) used should be saved
    with .html or .htm extension.
    4. VISUAL STUDIO CODE
    Visual Studio Code is a special HTML text editor which can create and edit HTML files.
    It comes with various functionalities and extensions. It is one of the best text editors for
    coding and development. The file(s) used should be saved with .html or .htm extension.
    DIFFERENCE BETWEEN HTML AND HTML5
    HTML HTML 5
    1. Does not allow JavaScript to run in Allows JavaScript to run in background.
    browser.
    2. It does not allow drag and drop It allows drag and drop effects.
    effects.
    3. It works with all old browsers. It supported by all new browser like Firefox,
    Mozilla, Chrome, Safari, etc.
    4. Older version of HTML are less HTML5 language is more mobile-friendly.
    mobile-friendly.
    5. Elements like nav, header were not New element for web structure like nav,
    present. header, footer etc.
    6. Doctype declaration is too long and Doctype declaration is quite simple and easy.
    complicated.
    7. <HTML>, <Body> , and <Head> These tags can be omitted while writing
    tags are mandatory while writing a HTML code.
    HTML code.
    8. Not possible to draw shapes like HTML5 allows to draw shapes like circle,
    circle, rectangle, triangle etc. rectangle, triangle etc.
    9. It didn’t support audio and video It supports audio and video controls with the
    without the use of flash player use of <audio> and <video> tags.
    support.
    REFERENCE

    • Astari S. HOSTINGER. What Is HTML? Hypertext Markup Language Basics Explained,


    October 05, 2022 -https://www.hostinger.com/tutorials/what-is-html
    • Kolade Chris. FreeCodeCamp. What is HTML – Definition and Meaning of Hypertext
    Markup Language, August 24, 2021 - https://www.freecodecamp.org/news/what-is-html-
    definition-and-meaning/
    • W3schools. https://www.w3schools.com/html/
    • Tutorials Tonight. https://www.tutorialstonight.com/html/
    • prakhar7. GeeksForGeeks. Difference between HTML and HTML5, May 26, 2022 -
    https://www.geeksforgeeks.org/difference-between-html-and-html5/
    • W3schools. HTML History - https://www.w3schools.in/html/history

    You might also like