HTML Tutorial 1: Introduce about html and its basic

html tutorial-web programming, web tutorial
HyperText Markup Language (HTML) is the main markup language for creating web pages and other information that can be displayed in a web browser. It is basic to start develop a website. Like its name, it uses tags to markup and describe your website. Every tag present for a element on web page. Because, it is only first step for you to develop website so it is easy to learn. You can use many editors tool to write and build html page like: dreamweaver, phpDesigner, Visual Studio... even notepad also can be used to create html document.

1. Structure of HTML document.
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<title>HTML Tutorial 1: Introduce about html and its basic</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Html document starts with DOCTYPE tag, you can ignore it but I think we should have it to say that document is standard for w3c rules. Two compulsory tags for document are <html> and <body>. When start tag with <tag> you must close tags with</tag>. In some case like <p> you don't need to end tag, compiler of browser can understand. And some other case like <hr/>, <br/> tag, they will start and end tag in a block tag. Above <body> tag, you can put <head> tags to describe meta and information about document. In <body> will contain tags(elements) to present for content of html document. They can form tags(like input, button, textarea..), heading tags, paragraph tag...

2. Head elements
Head block code contains many import information to describe about html document.
Title tag: It will contain title that display on tab of browser. Title of document is an import element for SEO.
<title>Programming web with .NET, Web tutorials, web programming tips, HTML, CSS, Jquery, ASP.NET, SEO</title>
Meta tag: They are tags contain extra information about like description, keyword, author, content type...
<meta content='blogger' name='generator'/>
Script code: Script can be added in <body> tag or in <head>.
<script type='text/javascript'>var x=0;</script>
Link tag: With link tag we can connect to a code resource that is outside of current document. They can be javascript file, css file, .... In addition this tag also contains extra information through an address url with href property.
<link type='text/css' rel='stylesheet' href='style.css' />
Style tag: with this tag we can link to an outside resource stylesheet file.
<style id='page-skin-1' type='text/css'>.webzoom{font-size:14px;color:#fff}</style>
3.Body elements
Body will contain content of document. And in it has many different tags to present parts of content. Syntax for tag are:
<tagname>content</tagname>
In body contain many type of tags:
- Form tags: form, input, textarea, button...
- Heading tag: that contain header of paragraph with many size from h1 to h6
- List tag: ul, li, ol....
- Paragraph and style tag: p, span, strong,...
....

0 nhận xét:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)