Scribd Logo
Upload

Welcome to Scribd!

  • HTML Fundamental Daffa Faiz Athallah

    Uploaded by

    Dap Poy
    7 views13 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
    7 views13 pages

    HTML Fundamental Daffa Faiz Athallah

    Uploaded by

    Dap Poy

    Copyright:

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

    HTML FUNDAMENTAL

    Introduction
    The HyperText Markup Language or HTML is the standard markup language for
    documents designed to be displayed in a web browser. It can be assisted by
    technologies such as Cascading Style Sheets (CSS) and scripting languages such as
    JavaScript.

    Hypertext means that the document contains links that allow the reader to jump to
    other places in the document or to another document altogether. The latest version
    is known as HTML5.

    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.

    What are Tags and Attributes?


    Tags and attributes are the basis of HTML.

    They work together but perform different functions – it is worth investing 2 minutes in
    differentiating the two.

    What Are HTML Tags?


    Tags are used to mark up the start of an HTML element and they are usually enclosed
    in angle brackets. An example of a tag is: <h1>.
    Most tags must be opened <h1> and closed </h1> in order to function.

    <!DOCTYPE html>
    <html>
    <head>
    <title>Page Title</title>
    </head>
    <body>

    <h1>Headings</h1>
    <p>Hello world</p>

    </body>
    </html>

    Example explained
    ● <!DOCTYPE html> declaration defines that this document is an HTML5
    document
    ● <html> element is root element of an HTML page
    ● <head> element contains meta information about the HTML page
    ● <title> element specifies a title for the HTML page (which is shown in the
    browser’s title bar or in the page’s tab)
    ● <body> element defines the document's body, and is a container for all the
    visible contents, such as headings, paragraphs, images, hyperlinks, tables,
    lists, etc.
    ● <h1> element defines a large heading
    ● <p> element defines a paragraph
    What are HTML Attributes?
    Attributes contain additional pieces of information. Attributes take the form of an
    opening tag and additional info is placed inside.

    An example of an attribute is:

    <img src="mydog.jpg" alt="A photo of my dog.">

    In this instance, the image source (src) and the alt text (alt) are attributes of the
    <img> tag.

    Other attributes :

    ● Width
    ● Height
    ● Style
    ● Href
    ● Id
    ● Class
    ● Alt
    ● Src
    ● Lang
    ● Title
    ● Etc

    Head

    <head> element is a container for metadata and it is placed after html tag and
    before body tag.

    Metadata typically defines the document title, character set, script, style, and other
    metadata information.
    <title> defines the title of the website

    <link> defines the relationship between the current document and an external
    resource

    It often used to link to external style sheets

    <link rel=”stylesheet” href=”style.css”>

    <meta> is typically used to specify the character set, page description, keywords,
    author of the document, and viewport settings.

    <meta charset=”UTF-8”> define a character set

    <meta name=”keywords” content=”html, css, js”> define keyword for search engine

    <meta name=”description” conten=”how to make a simple html page”> define a


    description of a website

    Body

    <body> defines the document's body.

    The <body> element contains all the contents of an HTML document, such as
    headings, paragraphs, images, hyperlinks, tables, lists, etc.

    <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    </body>

    Headings

    HTML headings are titles or subtitles that you want to display on a webpage.

    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>

    You can also customize the heading with style attributes. We will talk about styling
    some elements later

    <h1 style=” font-size:28px; color:green; ”> Hello </h1>

    Paragraph

    A paragraph always starts on a new line, and browsers automatically add some
    white space (a margin) before and after a paragraph.

    <p>This is paragraph</p>
    <p>This is another paragraph</p>

    Horizontal rules
    <p>This is paragraph</p>
    <hr>
    <p>This is another paragraph</p>

    Line breaks

    <p>This is a new paragraph <br> using the p tag.</p>

    Poem

    <pre>ur poem here</pre>


    Links

    The <a> tag defines hyperlink

    <a href=”ur link”>Link</a>

    Href attribute for link destination

    <a href="https://www.w3schools.com/">Visit W3Schools.com!</a>

    Images

    <img> tag used for showing picture

    <img src=”/picture/path.jpg” alt=” ”>


    Tables

    <table> tag for make a table in html

    <table>
    <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
    <tr>
    <td>Dtech</td>
    <td>Dalton</td>
    <td>Donzo</td>
    <tr>
    <td>Dybersec</td>
    <td>Daps</td>
    <td>Del Monte</td>

    Company Contact Country

    Dtech Dalton Donzo

    Dybersec Daps Del Monte

    <tr> = table row

    <th> = table headers (Company Contact Country)


    <td> = table cells

    List

    Unordered list / Bulleted list

    <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    </ul>

    ● Coffee
    ● Tea
    ● Milk

    Ordered list / Numbered list

    <ol>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    </ol>

    1. Coffee
    2. Tea
    3. Milk

    Form
    Used for collect user input

    <form>
    .
    form elements
    .
    </form>

    The <form> element is a container for different types of input elements, such as: text
    fields, checkboxes, radio buttons, submit buttons, etc.

    Input Element
    The HTML <input> element is the most used form element

    An <input> element can be displayed in many ways, depending on the type attribute.

    <input type="text"> Displays a single-line text input field


    <input type="radio"> Displays a radio button (for selecting one of many
    choices)
    <input type="checkbox"> Displays a checkbox (for selecting zero or more of many
    choices) <input type="submit"> Displays a submit button (for submitting the
    form)
    <input type="button"> Displays a clickable button
    Text Field
    The <input type="text"> defines a single-line input field for text input.

    <form>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" value="John"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" value="Doe">
    </form>

    Common Tags

    <section>

    <section> defines a section document


    <div>

    <div> defines a division or section in html an HTML document, <div> tag is used as a container
    for html elements, it can be styled with classes / css or manipulated with id / javascript.
    Created by : Daffa Faiz Athallah
    Date : 26 / 9 / 22

    You might also like