Scribd Logo
Upload

Welcome to Scribd!

  • Hyper Text Markup Language: Fakultas Ilmu Komputer - Universitas Brawijaya

    Uploaded by

    Yeremia Ndaumanu
    8 views18 pages
    This document provides an overview of HTML (Hypertext Markup Language) including: - The basic structure of an HTML document with <html>, <head>, <title>, and <body> tags - Common HTML tags for headings, paragraphs, lists, images, links, and forms - Attributes and values that can be included within tags - New tags introduced in HTML5 for improved semantics, dynamic content, and forms - Deprecated tags that are no longer used in HTML5

    Original Description:

    Original Title

    7_HTML.pptx

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document provides an overview of HTML (Hypertext Markup Language) including: - The basic structure of an HTML document with <html>, <head>, <title>, and <body> tags - Common HTML tags for headings, paragraphs, lists, images, links, and forms - Attributes and values that can be included within tags - New tags introduced in HTML5 for improved semantics, dynamic content, and forms - Deprecated tags that are no longer used in HTML5

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    8 views18 pages

    Hyper Text Markup Language: Fakultas Ilmu Komputer - Universitas Brawijaya

    Uploaded by

    Yeremia Ndaumanu
    This document provides an overview of HTML (Hypertext Markup Language) including: - The basic structure of an HTML document with <html>, <head>, <title>, and <body> tags - Common HTML tags for headings, paragraphs, lists, images, links, and forms - Attributes and values that can be included within tags - New tags introduced in HTML5 for improved semantics, dynamic content, and forms - Deprecated tags that are no longer used in HTML5

    Copyright:

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

    HTML

    HYPER TEXT MARKUP LANGUAGE

    FAKULTAS ILMU KOMPUTER - UNIVERSITAS BRAWIJAYA 09/02/2021


    HTML

    • Hypertext Markup Language


    • Bare Minimum of HTML Structure
    • <!DOCTYPE html>
    <html>
    <head>
    <title>Document Title</title>
    </head>
    <body>
    <p>Let’s rock the browser with HTML5</p>
    </body>
    </html>
    MORE HTML
    • Document type:
    • HTML5
    <!DOCTYPE html>

    • XHTML
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    MORE HTML (2)

    • Language
    <html lang=“en”>
    • Character Encoding in HTML5
    <head>
    ...
    <meta charset=“utf-8”>
    <head>
    XHTML:
    <meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
    TAG, ATTRIBUTE, VALUE

    • Tag
    • Void element: <input> <hr> <br>
    • Non void element:
    <a>Link</a>

    • Attribute and Value of Atrribute


    • <input name=“email” value=“who@where.com”>
    • Atrribute: name, value
    • Value: email, who@where.com
    STANDARD HTML TAGS
    • Heading • Form
    <h1>, <h2>, .... <form>
    • Table • Form Component
    <table>, <tr>, <th>, <td>, <tbody>, <input>, <select>, <textarea>
    <thead>
    • Link/Anchor
    • Paragraph
    <a>
    <p>
    • Layer (Box)
    • List
    <div>
    <ol>, <ul>, <li>
    • Formatting
    • Image
    <strong>, <em>, <sub>
    <img>
    • Line Break
    • Horizontal Line
    <br>
    <hr>
    Structure Inline Elements
    • <section> - to define sections of pages • <mark> - to indicate content that is marked in some
    • <header> - defines the header of a page fashion
    • <footer> - defines the footer of a page • <time> - to indicate content that is a time or date
    • <nav> - defines the navigation on a page • <meter> - to indicate content that is a fraction of a
    • <article> - defines the article or primary content on a page known range - such as disk usage

    • <aside> - defines extra content like a sidebar on a page • <progress> - to indicate the progress of a task
    towards completion
    • <figure> - defines images that annotate an article
    NEW TAGS IN HTML5

    Dynamic Support
    • <details>
    • provides details about an element. This would be like tooltips in non-Web applications.
    • <datagrid>
    • creates a table that is built from a database or other dynamic source
    • <menu>
    • an old tag brought back and given new life allowing you to create a menu system on your Web
    pages
    • <command>
    • defines actions that should happen when a dynamic element is activated
    NEW TAGS IN HTML5

    Dynamic Support
    • <canvas> - an element to give you a drawing space in JavaScript on your
    Web pages. It can let you add images or graphs to tool tips or just create
    dynamic graphs on your Web pages, built on the fly.
    • <video> - add video to your Web pages with this simple tag.
    • <audio> - add sound to your Web pages with this simple tag.
    NEW TAGS IN HTML5

    New Form Input Types


    • datetime • time
    • datetime-local • number
    • date • range
    • month • email
    • week • url
    • figure
    • figcaption
    DEPRECATED TAGS IN HTML5

    <acronym> <frameset>
    <applet> <isindex>
    <basefont> <noframes>
    <big> <noscript>
    <center> <s>
    <dir> <strike>
    <font> <tt>
    <frame> <u>
    MORE HTML (3)
    • Stylesheet (CSS)
    <head>
    ...
    <link href=“styles.css” rel=“stylesheet”>
    <head>
    • Javascript
    <head>
    ...
    <script src=“jscript.js”></script>
    <head>
    HTML5: BETTER SEMANTICS

    XHTML
    <div id=“header”> HTML5 <header>

    <div class=
    <article>
    “article”> <div id=
    <div “sidebar”> <aside>
    <nav>
    id=“nav”>
    <div class=
    <article>
    “article”>

    <div id=“footer”> <footer>


    NEW CUSTOM ATTRIBUTES
    • <div id=“ticker” data-custom=“custom-value”>
    • <div id=“receipt” data-orderno=“120”>

    • Custom attribute (data-customAttrName)


    • data-custom, data-orderno
    • Value of custom attribute
    • custom-value, 120
    • Getting value of an attribute (Javascript)
    • elementName.getAttribute(attrName);
    TUGAS

    • Buat 1 halaman HTML yang berisi Biodata diri masing-masing berisi:


    • Nama
    • NIM
    • Alamat
    • Jurusan
    • Foto
    • Pengalaman Organisasi (No, Uraian, Tingkat)
    • Mata Kuliah yang diambil semester ini (No, Nama MK, SKS)
    • Dikumpulkan Kamis, 15 April 2018. 23:00 dalam bentuk HTML terkoleksi di ketua kelas
    TERIMA KASIH
    THANK YOU

    You might also like