Learning HTML

HTML Introduction

What is HTML?
HTML Tags
HTML Elements

HTML element = HTML tags + contents within

HTML Page Structure: nested

HTML Versions

Version Year
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2012
<!DOCTYPE> Declaration

HTML Basic

HTML Headings

<h1> to <h6>

HTML Paragraphs

<p> and </p>

HTML Links (anchor)

<a href="http://www.w3schools.com">This is a link</a>

HTML Images

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

HTML Elements
HTML Attributes
Text Formatting
HTML Links
Target Attribute

HTML <head>

Head Section

defines information about the document

The following tags can be added to the head section: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

HTML Styles - CSS

CSS

Cascading Style Sheets

HTML Images

<img> tag is empty (contains attributes only, and no closing tag)

Syntax: <img src="url" alt="some_text">

Example: <img src="smiley.gif" alt="Smiley face" width="42" height="42">

More Options

HTML Table

Elements

HTML List

Elements

HTML Blocks

HTML Elements

HTML Layouts

Using <div> elements (a shortening of division)
<div id="container" style="width:500px">
    <p></p>
    <div id="header" style="background-color:#FFA500;">
        <h1 style="margin-bottom:0;">Main Title of Web Page</h1>
    </div>
    <p></p>
    <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
        <b>Menu</b><br>
        HTML<br>
        CSS<br>
        JavaScript
    </div>
    <p></p>
    <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
        Content goes here
    </div>
    <p></p>
    <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
        Copyright ? W3Schools.com
    </div>
    <p></p>
</div>
div

div

Using <table> elements
<table width="500" border="0">
    <tr>
        <td colspan="2" style="background-color:#FFA500;">
            <h1>Main Title of Web Page</h1>
        </td>
    </tr>
    <tr>
        <td style="background-color:#FFD700;width:100px;">
            <b>Menu</b><br>HTML<br>CSS<br>JavaScript
        </td>
        <td style="background-color:#EEEEEE;height:200px;width:400px;">
            Content goes here
        </td>
    </tr>
    <tr>
        <td colspan="2" style="background-color:#FFA500;text-align:center;">
            Copyright ? W3Schools.com
        </td>
    </tr>
</table>

HTML Forms and Input

<form>

HTML Iframes

An iframe is used to display a web page within a web page, i stands for inline

<iframe src="http://bl.ocks.org/mbostock/raw/4060366/" width="1000" height="560"></iframe>

HTML Colors, Color Names

CSS colors

HTML Scripts: JavaScript

<script> tag

define a client-side script, such as a JavaScript, e.g. <script> document.write("Hello World!") </script>

<noscript>

provide an alternate content, <script>...</script><noscript>Sorry, Your Browser Doesn't Support It</noscript>

A Taste of JavaScript

document.write("<p>This is a paragraph</p>");
<button type="button" onclick="myFunction()">Click Me!</button>
document.getElementById("demo").style.color="#ff0000";

HTML Entities

Be replaced with character entities

&entity_name; or &#entity_number; e.g.

HTML Symbols

HTML symbols

like mathematical operators, arrows, technical symbols and shapes, are not present on a normal keyboard.

HTML Encoding (Character Sets)

What is Character Encoding?

HTML Uniform Resource Locators

Syntax

scheme://host.domain:port/path/filename

Common URL Schemes

URL Encoding

HTML - XHTML

What Is XHTML?

Why XHTML?

The Most Important Differences from HTML


Refs

  1. HTML Introduction
  2. HTML Basic
  3. HTML Styles - CSS
  4. HTML Images
  5. HTML Table
  6. HTML List
  7. HTML Blocks
  8. HTML Layouts
  9. HTML Forms and Input
  10. HTML Iframes
  11. HTML Colors, Color Names
  12. HTML Scripts: JavaScript
  13. HTML Symbols
  14. HTML Entities
  15. HTML Uniform Resource Locators
  16. HTML Encoding (Character Sets)
  17. <bdo> - HTML (HyperText Markup Language) | MDN

「Load Disqus | 加载评论」