HTML Introduction

What is HTML

HTML is an acronym for Hypertext Markup Language, this markup language is used for creating webpages, it describes the structure and display of a website using elements and attributes.

A typical HTML document structure

    •       
                    <!DOCTYPE html>	 
<html>
    <head>
        <title>the title of the page </title>
    </head>
    <body>
        <h1>Heading</h1>
        <p> paragraph.</p>
    </body>
</html>

    The <!DOCTYPE> Declaration

    The <!DOCTYPE>declaration tag is used by the web browser to understand the version of the HTML used in the document. Current version of HTML is 5 and it makes use of the following declaration − <!DOCTYPE html> There are many other declaration types which can be used in HTML document depending on what version of HTML is being used. please note although html is not case sensitive, we recommend the use of lower case.

    ELEMENT and TAGS

    the words tags and elements are used interchangeably, HTML uses elements (characters that sit inside angledbrackets) to give the information they surround special meaning

    ATTRIBUTES

    Attributes provides an added information regarding the contents of an element. They are placed on the opening tag of the element and are made up of two parts: a name and a value, separated by an equals sign.

    WEB SERVER AND WEB BROWSER

    A web servers are cumputers that are always connected to the internet and are optimized to send webpages out to those who request them. Web browser(chrome, explorer etc) displays HTML documents correctly, it does not display the tags but uses them to determine how to display the document.

    What To Know About HTML Tags and attributes

    HTML pages are text documents, hence tags(elements) are use to format HTML pages. Therefore, the followings are the basic informtions to know about HTML tags.

    • HTML uses tags (characters that sit inside angled brackets) to give the information they surround special meaning.
    • Tags are often referred to as elements.
    • Tags usually come in pairs. The opening tag denotes the start of a piece of content; the closing tag denotes the end. It is indicated with a foward slash(/).
    • Opening tags can carry attributes, which tell us more about the content of that element.
    • Attributes require a name and a value.
    • To learn HTML you need to know what tags are available for you to use, what they do, and where they can go.
    • Web browser does not display the HTML tags, but uses them to determine how to display the document.

    simple HTML tags and Discription

    • The <!DOCTYPE html> This tag declare the document type and HTML version (HTML5)
    • The <html> element is the root element of an HTML page
    • The <head> element contains meta information about the document, title, links...
    • The <title> element is used inside the <head> tag to specifies a title for the document
    • The <body> element contains the visible page content
    • The <h1> element defines a large heading
    • The <p> element defines a paragraph

    HISTORY OF HTML

    Since the inception of the World Wide Web there have been various versions of HTML. They are all modifications of the one created by Tim Berners in 1991 after he invented WWW in 1989, after Tim Berners-Lee, Dave Raggett came on stage in 1993 with a draft of HTML+. From 1995 down to 2000 severval others came up with an updated version, in 2008 WHATWG made a public draft of HTML5, This is still been improved on till date.

    HTML Input Attributes

    The value Attribute

    The input value attribute specifies an initial value for an input field:Input fields with initial (default) values:

    •      
                     <!DOCTYPE html>	 
    <html>
    <head>
        <title>value</title>
    </head>
    <body>
        <form>    
            <label for="fname">First name: </label>
            <input type="text" id="fname" name="fname" value="tea"> 
            <label for="lname">Last name: </label> 
            <input type="text" id="lname" name="lname" value="cup">  
        </form>
    </body>
</html>

    The readonly Attribute

    The input readonly attribute specifies that an input field is read-only.A read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy the text from it).The value of a read-only input field will be sentwhen submitting the form!

    •       
                    <!DOCTYPE html>	 
<html>
    <head>
        <title>readonly</title>
    </head>
    <body>
        <form>        
            < label for="fname">First name: </label>
            <input type="text" id="fname" name="fname" value="tea" readonly>
            <label for="lname">Last name: </label> 
            <input type="text" id="lname" name="lname" value="David">
        </form>
    </body>
</html>

    The disabled Attribute

    The input disabled attribute specifies that an input field should be disabled. A disabled input field is unusable and un-clickable. The value of a disabled input field will not be sent when submitting the form!

    •   
                    <!DOCTYPE html>	 
<html>
    <head>
        <title>disabled</title>
    </head>
    <body>
        <form>   
            <label for="fname">First name: </label>
            <input type="text" id="fname" name="fname" value="tea" disabled>
            <label for="lname">Last name: </label> 
            <input type="text" id="lname" name="lname" value="David">
        </form>
    </body>
</html>

    The size Attribute

    The input size attribute specifies the visible width, in characters, of an input field. The default value for size is 20. Note: The size attribute works with the following input types: text, search, tel, url, email, and password. 

    •         
                    <!DOCTYPE html>	 
<html>
<head>
    <title>size</title>
</head>
    <body>
        <form>      
            <label for="fname">First name: </label>
            <input type="text" id="fname" name="fname"size="50">
            <label for="pin">PIN </label> 
            <input type="text" id="pin" name="pin" size="4" >
        </form>
    </body>
</html>

    The maxlength Attribute

    The input maxlength attribute puts in the maximum number of characters allowed in an input field.

    Note: When a maxlength is set, the input field will not accept more than the stated number of characters. However, this attribute does not provide any feedback. In other to alert the user, you must write JavaScript code.

    •     
                    <!DOCTYPE html>	 
<html>
<head>
    <title>max length</title>
</head>
    <form>
        <body><  label for="fname">First name: </label>
        <input type="text" id="fname" name="fname"size="50">
        <label for="pin">PIN </label> 
        <input type="text" id="pin" name="pin"maxlength="5" size="4" >
    </form>
    </body>
</html>

    The min and max Attributes

    The input min and max attributes specify the minimum and maximum values for an input field. The min and max attributes work with the following input types: number, range, date, datetime- local, month, time and week. Tip: Use the max and min attributes together to create a range of legal values.

    The input min and max attributes specify the minimum and maximum values for an input field. The min and max attributes work with the following input types: number, range, date, datetime- local, month, time and week. Tip: Use the max and min attributes together to create a range of legal values.

    •     
                    <!DOCTYPE html>	 
<html>
<head>
    <title>Page Title</title>
</head>
    <body>
        <form>      
            <label for="vol">Volume (between 0 and 200):  </label> 
            <input type="range" id="vol" name="vol" min="0" max="200">   
        </form>
    </body>
</html>

    Popular tags

    HTML Forms HTML Table HTML List HTML Video HTML Image

    Dess App

    DessApp is an Integrated E-learning Education, Interactive and User-friendly features, smarter options and redefining your school costs effectively and efficiently.

    View
    1 1