Skip to content

01_HTML101.md

Latest commit

 

History

History
312 lines (201 loc) · 8.66 KB

01_HTML101.md

File metadata and controls

312 lines (201 loc) · 8.66 KB

HTML Basics



1. The Birth and Meaning of HTML 5


What is HTML

  • An abbreviation of Hyper Text Markup Language

    • Hyper Text

      • A format where each document contains links that connect to other documents (a format that can navigate to various documents)

      • HTTP

        : A format for exchanging Hyper Text

    • Markup

      • The work of defining the structure of a document

    • Markup Language lacks the computational capabilities that a computer language would normally have; it simply has the function of indicating the nature of content

    • A computer language that defines the structure of Web content (text/images)

  • A document stored on a Web server that is called up at the request of a Client web browser

  • HTML called up by a web browser is interpreted by the web browser and its content is displayed on the screen



The Birth and Evolution of HTML

  • Born in 1990 along with WWW (World Wide Web)
  • The importance of web browsers expanded with the development of the web
  • The market share war between 'Netscape Navigator' and 'Microsoft Internet Explorer' deepened non-standard HTML and CSS
  • The emergence of new web browsers led to discussions on web standardization
  • W3C (World Wide Web Consortium) develops, discusses, and establishes web standards
  • 1997 W3C HTML3.2 Recommendation - Included non-standard HTML due to market demands
  • 1999 HTML 4.01 Recommendation - Various versions emerged due to market demands
  • 2000 XHTML Recommendation - A web standard centered on the strictness of XML
  • W3C was pursuing XHTML2 development but suddenly shifted direction to HTML5

Recent Web Trends

  • Ajax

    : Overcoming the limitations of synchronous web using JavaScript to communicate with web servers

  • Web 2.0

    : A general term for the web where user active participation and convenience are maximized



The Birth of HTML5


Limitations of Existing HTML

  • HTML could not keep up with the development of web-based businesses and technologies

  • Demanded standardized technologies for dynamic web

  • W3C announced the evolution to XHTML2


Birth of WHATWG (Web Hypertext Application Technology Working Group)

  • A working group independently created by web-related companies and organizations disappointed by W3C's failure to meet market demands
  • Began working on the HTML5 specification by analyzing web technologies and market demands

W3C's Adoption of HTML5

  • 2008 W3C HTML5 Draft published
  • 2009 XHTML2 development discontinued
  • 2014 XHTML5 Recommendation planned

Characteristics of HTML5

  • Maintains compatibility with existing HTML

  • Practical design

    : Loose syntax, efficient additional elements, secure security

  • Complete separation of presentation and content

  • Processing various media and dynamic operations without plugins: Canvas

  • Adoption of the latest web technologies

    : Geolocation, WebSocket, Web Storage, Web Workers, etc.



2. Getting Started with HTML5


Specifying a Doctype

  • Since HTML has multiple versions, you must specify a Doctype.
  • The existing Doctype required specifying a very long and complex DTD.
  • It became shorter due to the practicality principle of HTML5.
 <!DOCTYPE html>

HTML Writing Rules

  • HTML markup commands are called elements.
  • HTML is not case-sensitive.
  • Elements are enclosed in angle brackets to distinguish them from content. - Tags
<p>, <a>, <div>
  • The scope of an element is specified with opening and closing tags.
<p>This is a paragraph.</p>
  • Some elements are used standalone without a closing tag.
<br>, <img>, <meta>
  • Element attributes are written in the format attribute name = "attribute value".
<img src="img/logo.jpg" alt="Company Logo">

Structure of HTML


Image result for dom tree


<!Doctype html>
<html>
 <head>
        <title>Sample Page</title>
 </head>
 <body>
        <H1>
            Welcome, y'all!
        </H1>
 </body>
</html>
  • <html> wraps the entire HTML code.
  • HTML is divided into <head> and <body> sections.
  • <head> contains metadata, scripts, CSS, etc. (external file connections)
  • The <body> section is where content goes and is displayed in the web browser.


3. <head> Configuration


Specifying the Title

  • The title of the HTML file appears in the web browser's title bar.
<title>Web Page Title</title>

Character Encoding

  • The character encoding of the text editor must match the HTML character encoding for correct display in the web browser.
  • Set to UTF-8, which is Unicode.

Metadata

  • Writing metadata is advantageous for web search.
  • You can record information about the HTML.

How to Write Metadata

<meta name="description"content="HTML5 and Javascript learning content ">
<meta name="keywords" content="HTML5, CSS, JavaScript">
<meta name="author"content="Lee HaeBum">
<meta name="copyright" content="©2012 Lee HaeBum">
<meta name="reply-to" content=gomtomi@imacca.com>
<meta name="date" content="2012-05-30T12:35:20+09:00">

A New Protocol for Representing Metadata, Open Graph Protocol

  • Delivers document information through HTML document meta data
  • Created by Facebook, it defines the ability to write title, description, etc. corresponding to meta information

ex)

<html prefix="og: http://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>

Optional Metadata

The following properties are optional for any object and are generally recommended:

  • og:audio - A URL to an audio file to accompany this object.
  • og:description - A one to two sentence description of your object.
  • og:determiner - The word that appears before this object's title in a sentence. An enum of (a, an, the, "", auto). If auto is chosen, the consumer of your data should chose between "a" or "an". Default is "" (blank).
  • og:locale - The locale these tags are marked up in. Of the format language_TERRITORY. Default is en_US.
  • og:locale:alternate - An array of other locales this page is available in.
  • og:site_name - If your object is part of a larger web site, the name which should be displayed for the overall site. e.g., "IMDb".
  • og:video - A URL to a video file that complements this object.

Semantic Tag

  • The emergence of tags that carry semantic meaning in HTML - Don't use <div>!
  • Representative Tags
    • header: The header of the entire document or a section (head portion)
    • nav: navigation
    • aside: Space located on the side, content with little relation to the main content
    • section: An independently distinguishable area within a document, page, or site
    • footer: The footer of the entire document or a section (end portion)
  • Tags that express meaningful groups of information not only for developers and users but also for search engines, etc.
  • An effort to utilize tags that carry meaning, not just dividing sections
  • Non-semantic elements include div, span, etc., and h1, table tags can also be considered semantic tags
  • For Search Engine Optimization (SEO), it is necessary to effectively use markup through meta tags, semantic tags, etc.!

4. Connecting External Files


  • CSS and JavaScript used with HTML should be separated into different files as a principle.
  • Connecting an external CSS file
<link rel="stylesheet" href="css/style.css">
  • Connecting an external JavaScript file
<script src="js/script.js"></script>



What are the differences in meta elements and Empty elements in HTML5 compared to existing HTML?

  • Unlike previous HTML elements, meta elements only have opening elements and no closing elements
  • While existing HTML elements informed the web browser about the structure and meaning of the content, meta elements inform the web browser about document information
  • While typical HTML elements wrap content, meta elements only contain information in attributes and attribute values and do not wrap content
    • Therefore, they are called Empty elements, meaning elements that have no content
    • Empty elements include img, area, br, hr, input, etc.