티스토리 뷰

스크랩방/튜토리얼 링크

[HTML] TutorialsPoint: HTML Tutorial

devheedoo 2017. 5. 29. 15:37

HTML Tutorial

HTML stands for Hyper Text Markup Language, which is the most widely used language on Web to develop web pages.

Overview

Basic HTML Document

<!DOCTYPE html>
<html>
  <head>
    <title>TITLE</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </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>

Basic Tags

Line Break Tag

The <br /> tag has a space between the characters br and the forward slash. If you omit this space, older browsers will have trouble rendering the line break.

Horizontal Lines

Horizontal lines are used to visually break up sections of a document. The <hr> tag creates a line from the current position in the document to the right margin and breaks the line accordingly. Again <hr /> tag is an example of the empty element, where you do not need opening and closing tags, as there is nothing to go in between them.

Nonbreaking Spaces

In cases where you do not want the client browser to break text, you should use a nonbreaking space entity   instead of a normal space.

Elements

Attributes

The title Attribute

The behavior of this attribute will depend upon the element that carries it, although it is often displayed as a tooltip when cursor comes over the element or while the element is loading.

Formatting

Monospaced Font

The content of a <tt>...</tt> element is written in monospaced font. Most of the fonts are known as variable-width fonts because different letters are of different widths (for example, the letter 'm' is wider than the letter 'i'). In a monospaced font, however, each letter has the same width.

Phrase Tags

Marked Text

Anything that appears with-in <mark>...</mark> element, is displayed as marked with yellow ink.

Text Direction

The <bdo>...</bdo> element stands for Bi-Directional Override and it is used to override the current text direction.

Computer Code

Any programming code to appear on a Web page should be placed inside <code>...</code> tags. Usually the content of the <code> element is presented in a monospaced font, just like the code in most programming books.

Meta Tags

HTML lets you specify metadata - additional important information about a document in a variety of ways. The META elements can be used to include name/value pairs describing properties of the HTML document, such as author, expiry date, a list of keywords, document author etc.

<!DOCTYPE html>
<html>
<head>
  <title>Meta Tags Example</title>
  <meta name="keywords" content="HTML, Meta Tags, Metadata" />
  <meta name="description" content="Learning about Meta Tags." />
  <meta name="author" content="Mahnaz Mohtashim" />
  <meta name="revised" content="Tutorialspoint, 3/7/2014" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="cookie" content="userid=xyz; expires=Wednesday, 08-Aug-15 23:59:59 GMT;" />
  <meta http-equiv="refresh" content="5; url=https://www.tutorialspoint.com" />
</head>
<body>
  <p>Hello HTML5!</p>
</body>
</html>

Comments

Commenting Script Code

Though you will learn Javascript with HTML, in a separate tutorial, but here you must make a note that if you are using Java Script or VB Script in your HTML code then it is recommended to put that script code inside proper HTML comments so that old browsers can work properly.

<script>
<!-- 
   document.write("Hello World!")
//-->
</script>

Commenting Style Sheets

Though you will learn using style sheets with HTML in a separate tutorial, but here you must make a note that if you are using Casecading Style Sheet (CSS) in your HTML code then it is recommended to put that style sheet code inside proper HTML comments so that old browsers can work properly.

<style>
<!--
.example {
  border:1px solid #4a7d49;
}
//-->
</style>

Images

Tables

Table Header, Body, and Footer

Tables can be divided into three portions: a header, a body, and a foot. The head and foot are rather similar to headers and footers in a word-processed document that remain the same for every page, while the body is the main content holder of the table.

The three elements for separating the head, body, and foot of a table are:

<thead> - to create a separate table header.
<tbody> - to indicate the main body of the table.
<tfoot> - to create a separate table footer.

Lists

HTML Definition Lists

HTML and XHTML support a list style which is called definition lists where entries are listed like in a dictionary or encyclopedia. The definition list is the ideal way to present a glossary, list of terms, or other name/value list.

Definition List makes use of following three tags.

<dl> - Defines the start of the list
<dt> - A term
<dd> - Term definition
</dl> - Defines the end of the list

Text Links

Linking Documnets

A link is specified using HTML tag <a>. This tag is called anchor tag and anything between the opening <a> tag and the closing </a> tag becomes part of the link and a user can click that part to reach to the linked document. Following is the simple syntax to use <a> tag.

<a href="Document URL" ... attributes-list>Link Text</a>

The target Attribute

We have used target attribute in our previous example. This attribute is used to specify the location where linked document is opened. Following are possible options:

Option	Description
_blank	Opens the linked document in a new window or tab.
_self	Opens the linked document in the same frame.
_parent	Opens the linked document in the parent frame.
_top	Opens the linked document in the full body of the window.
targetframe	Opens the linked document in a named targetframe.

Use of Base Path

When you link HTML documents related to the same website, it is not required to give a complete URL for every link. You can get rid of it if you use <base> tag in your HTML document header. This tag is used to give a base path for all the links. So your browser will concatenate given relative path to this base path and will make a complete URL.

<!DOCTYPE html>
<html>
<head>
  <title>Hyperlink Example</title>
  <base href="https://www.tutorialspoint.com/">
</head>
<body>
  <p>Click following link</p>
  <a href="/html/index.htm" target="_blank">HTML Tutorial</a>
</body>
</html>

Image Links

Client-Side Images Maps

<img src=/images/html.gif alt="HTML Map" border="0" usemap="#html"/>
<!-- Create  Mappings -->
<map name="html">
   <area shape="circle" 
   coords="80,80,20" href="/css/index.htm" alt="CSS Link" target="_self" />
   <area shape="rect" 
   coords="5,5,40,40" alt="jQuery Link" href="/jquery/index.htm" target="_self" />
</map>

Coordinate System

The actual value of coords is totally dependent on the shape in question. Here is a summary, to be followed by detailed examples:

rect = x1 , y1 , x2 , y2

x1 and y1 are the coordinates of the upper left corner of the rectangle; x2 and y2 are the coordinates of the lower right corner.
circle = xc , yc , radius

xc and yc are the coordinates of the center of the circle, and radius is the circle's radius. A circle centered at 200,50 with a radius of 25 would have the attribute coords="200,50,25"
poly = x1 , y1 , x2 , y2 , x3 , y3 , ... xn , yn

The various x-y pairs define vertices (points) of the polygon, with a "line" being drawn from one point to the next point. A diamond-shaped polygon with its top point at 20,20 and 40 pixels across at its widest points would have the attribute coords="20,20,40,40,20,60,0,40".

Frames

Iframes

You can define an inline frame with HTML tag <iframe>. The <iframe> tag is not somehow related to <frameset> tag, instead, it can appear anywhere in your document. The <iframe> tag defines a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders.

The src attribute is used to specify the URL of the document that occupies the inline frame.

<iframe src="/html/menu.htm" width="555" height="200">
   Sorry your browser does not support inline frames.
</iframe>

Blocks

All the HTML elements can be categorized into two categories (a) Block Level Elements (b) Inline Elements. For example the <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, and <address> elements are all block level elements.

Grouping HTML Elements

The difference between the <span> tag and the <div> tag is that the <span> tag is used with inline elements where as the <div> tag is used with block-level elements.

Backgrounds

Colors

Fonts

Forms

Form Attributes

Apart from common attributes, following is a list of the most frequently used form attributes:

Attribute	Description
action	Backend script ready to process your passed data.
method	Method to be used to upload data. The most frequently used are GET and POST methods.
target	Specify the target window or frame where the result of the script will be displayed. It takes values like _blank, _self, _parent etc.
enctype	You can use the enctype attribute to specify how the browser encodes the data before it sends it to the server. Possible values are:application/x-www-form-urlencoded - This is the standard method most forms use in simple scenarios.mutlipart/form-data - This is used when you want to upload binary data in the form of files like image, word file etc.

Embed Multimedia

Marquees

Header

This chapter will give a little more detail about header part which is represented by HTML <head> tag. The <head> tag is a container of various important tags like <title>, <meta>, <link>, <base>, <style>, <script>, and <noscript> tags.

The HTML `<meta>` Tag

The HTML <meta> tag is used to provide metadata about the HTML document which includes information about page expiry, page author, list of keywords, page description etc.

<!-- Provide list of keywords -->
<meta name="keywords" content="C, C++, Java, PHP, Perl, Python">

<!-- Provide description of the page -->
<meta name="description" content="Simply Easy Learning by Tutorials Point">

<!-- Author information -->
<meta name="author" content="Tutorials Point">

<!-- Page content type -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!-- Page refreshing delay -->
<meta http-equiv="refresh" content="30">

<!-- Page expiry -->
<meta http-equiv="expires" content="Wed, 21 June 2006 14:25:27 GMT">

<!-- Tag to tell robots not to index the content of a page -->
<meta name="robots" content="noindex, nofollow">

Style Sheet

Javascript

Event Handlers

Event handlers are nothing but simply defined functions which can be called against any mouse or keyboard event. You can define your business logic inside your event handler which can vary from a single to 1000s of line code.

<script type="text/javascript">
function EventHandler(){
   alert("I'm event handler!!");
}
</script>
<p onmouseover="EventHandler();">Bring your mouse here to see an alert</p>

Hide Scripts from Older Browsers

Although most (if not all) browsers these days support Javascript, but still some older browsers don't. If a browser doesn't support JavaScript, instead of running your script, it would display the code to the user. To prevent this, you can simply place HTML comments around the script as shown below.

<script type="text/javascript">
<!--
document.write("Hello Javascript!");
//-->
</script>

Default Scripting Language

There may be a situation when you will include multiple script files and ultimately using multiple <script> tags. You can specify a default scripting language for all your script tags. This saves you from specifying the language everytime you use a script tag within the page. Below is the example:

<meta http-equiv="Content-Script-Type" content="text/JavaScript" />

Layouts

Deprecated Tags

A complete list of deprecated HTML tags and attributes are given here. All the tags have been ordered alphabetically along with their equivalent tag or alternate CSS option.

Tag	Description	Alternate
applet	Deprecated. Specifies an applet	`<object>`
basefont	Deprecated. Specifies a base font
center	Deprecated. Specifies centered text	text-align
dir	Deprecated. Specifies a directory list
embed	Deprecated. Embeds an application in a document	`<object>`
font	Deprecated. Specifies text font, size, and color	font-family, font-size
isindex	Deprecated. Specifies a single-line input field
listing	Deprecated. Specifies listing of items	`<pre>`
menu	Deprecated. Specifies a menu list
plaintext	Deprecated. Specifies plaintext	`<pre>`
s	Deprecated. Specifies strikethrough text	text-decoration
strike	Deprecated. Specifies strikethrough text	text-decoration
u	Deprecated. Specifies underlined text	text-decoration
xmp	Deprecated. Specifies preformatted text	`<pre>`

HTML Decprecated Attributes

Following is the list of deprecated HTML attributes and alternative CSS options available.

Attribute	Description	Alternate
align	Specifies positioning of an element	text-align, float & vertical-align
alink	Specifies the color of an active link or selected link	active
background	Specifies background image	background-image
bgcolor	Specifies background color	background-color
border	Specifies a border width of any element	border-width
clear	Indicates how the browser should display the line after the element	clear
height	Specifies height of body and other elements	height
hspace	Specifies the amount of whitespace or padding that should appear left or right an element	padding
language	Specifies scripting language being used	type
link	Specifies the default color of all links in the document	link
nowrap	Prevents the text from wrapping within that table cell	white-space
start	Indicates the number at which a browser should start numbering a list	counter-reset
text	Specifies color of body text	color
type	Specifies the type of list in tag	list-style-type
vlink	Specifies the color of visited links	visited
vspace	Specifies the amount of whitespace or padding that should appear above or below an element	padding
width	Specifies width of body and other elements	width

저작자표시

'스크랩방 > 튜토리얼 링크' 카테고리의 다른 글

[ReactJS] 공식 튜토리얼 (0)	2017.06.13
[HTML] TutorialsPoint: HTML5 Tutorial (0)	2017.05.29
[JavaScript] Google JavaScript Style Guide (0)	2017.05.29

공유하기 링크

페이스북
카카오스토리
트위터

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday