Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
Web Design
HTML and CSS áĄáá¸ááŹááá¸áąááá Web Page áąááźááŻá ááá¸ááŻáááá¸ááŽáˇ
World Wide Myanmar Training Centre (Myanmar) 12A/D1, Ground Floor, Thamine, Yangon-Insein Road, Yangon, Myanmar.
ááá¸áąááŹáá¸ááá˛ááŻáááŹááŻá áąááŹá¸áżáááá¸áˇ áĄáąáżáááľáĄááš ááŻáľáˇ HTML, CSS Programming á áŹáĄáŻáá¸áá á¸ááŻáᏠáżáá á¸ááŤááá¸á
Ph: 95-01-652936 (Malaysia) Lot 25, 2nd Floor, Jalan Lebuh Pudu, 50050 Kuala Lumpur, Malaysia. Ph: 6-03-20260846 http://www.worldwidemyanmar.com World Wide Myanmar Training Centre, Cyber CafĂŠ , Sales & Services
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET About
Author Mr. Min Aung "PlanetCreator", BCSc (Bachelor's Computer Science) Yangon, Myanmar, HDSE (Higher Diploma in Software Engineering), HDNE (Higher Diploma in Network Engineering), MCSE (Microsoft Certified System Engineer), PCIP ( Professional Critical Infrastructure Protection) Malaysia, has been part of the IT security industry for several years now. His published research covers exciting topics such as cracking into embedded devices, web hacking, eavesdropping techniques, magstripes, and credit card security.
Notice of Rights All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations included in critical articles or reviews. Your Feedback If you wish to contact us, for whatever reason, please feel free to email us at inquiry@worldwidemyanmar.com. We have a well-staffed email support system set up to track your inquiries. Suggestions for improvement are especially welcome. Editorâs Note Website files can be edited with software as simple as Notepad ⢠There are many free and paid software programs available to make editing files easier. This software is of two types: WSYIWIG editors and HTML editors. ⢠WSYIWIG (what you see is what you get) editors allow you to work with an HTML document in its final display format. Although most modern editors have improved in this area, some have a tendency to create messy HTML or interfere with existing HTML code in the document. ⢠HTML editors are very helpful and are recommended. The most useful feature is colour-coding of tags to separate them from the text. Examples: ⢠Dreamweaver (http://www.adobe.com) ⢠Arachnophilia (http://www.arachnoid.com) ⢠Micrsoft Expression Web (http://www.microsoft.com) ⢠Komodo Edit (http://www.activestate.com/komodo_edit/) ⢠âŚand many others; some are free, and some have a license fee. In this tutorial, I want you all to do with simple Notepad Editor to improve your skill.
Page 2 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET ááŹáááᏠá Table of Contents
áĄáąážááŹáá¸áˇáĄááŹ
á áŹáášáá¸áá˝áŹ
Cover âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ..âŚâŚ
1
About âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ..
2
Table of Contents âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ..
3
Web Design Concepts âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ..
6
Doctypes âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
7
HTML áá˝áá¸áś XHTML ááŻááááźá˛áżááŹáˇáá âŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ
11
History of HTML âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
13
HTML âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ
14
Source Code âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
17
HTML Colour âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
18
Link âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
25
Absolute Paths âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
25
Relative Paths âŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
25
TAG âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ..âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ
26
Comment âŚâŚâŚâŚâŚâŚâŚ..âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ
27
ELEMENTS âŚâŚâŚâŚâŚâŚâŚ..âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ
27
Attribute âŚâŚâŚâŚâŚâŚâŚ..âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ
28
Class Attribute âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
28
ID Attribute âŚ..âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
29
Style Attribute âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
30
Title Attribute âŚâŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
31
Building Web Page âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ
32
HTML Editors âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ
33
HTML Head Elements âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ..
34
<head> âŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
34
<title> âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
34
<base /> âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
35
<link /> âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
35
<meta /> âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
35
<script> âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ..âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
35
<style> âŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
36
HTML Body Elements âŚâŚâŚâŚâŚ..âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ..
36
Forms âŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
36
<form> | <button> | <label> | <option> | <fieldset> | <legend> |
Page 3 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<select> | <optgroup> | <textarea> Input Type
button | radio | reset | checkbox | image | range | submit | file | password | readonly | text
Tables âŚâŚâŚ..âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
46
<table> | <caption> | <thead> | <tfoot> | <col> | <colgroup> | <tr> | <th> | <td> Texts âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
55
Character Entities Anchors âŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
56
<a> Name attribute Style Sheets âŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
58
<span> | <div> Line Breaking âŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
62
<br /> | <nobr> List Elements âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
63
<dl> | <ol> | <ul> | <menu> | <dir> | <li> | <dd> | <dt> Multimedia âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
68
<img> | <bgsound> | <sound> | <area> | <map> | <object> Block Formatting ..âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
74
<address> | <Hx> | <p> | <blockquote> | <marquee> | <pre> | <center> <multicol>
Character Formatting .âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ. <abbr> | <cite> | <font> | <q> | <spell> | <sup> | <b> | <code> |
84
<i> | <s> | <strike> | <tt> | <big> | <dfn> | <samp> | <strong> | <u> | <blink> | <em> | <kbd> | <small> | <sub> | <var> Embedded Funtionality .âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ. <embed> | <noembed> | <script> | <noscript> | <iframe> | <applet> |
94
<param> Revision Control .âŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ. <del> | <ins> Ruby Elements âŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ. <ruby> | <rb> | <rt> | <rbc> | <rtc> Frameset Elements âŚâŚâŚâŚâŚ..âŚâŚâŚâŚâŚâŚâŚâŚ..âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.. <frameset> âŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ. <frame> âŚâŚâŚ...âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ. <noframe> âŚâŚ.âŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ. HTML Exercise âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
Page 4 of 197
99 100 103 104 105 105 106
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ..âŚâŚ.âŚ~~~ CSS ~~~âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
112
Introduction CSS âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
112
Appling âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
113
Internal CSS âŚâŚ.âŚâŚ..âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
113
External CSS âŚâŚâŚâŚâŚâŚ..âŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
113
Inline CSS âŚâŚâŚâŚâŚâŚ..âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
114
Syntax . Structure âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
115
Value âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ..âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
115
Property âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
116
Selector âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
116
Class Selector âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
116
ID Selector âŚâŚâŚâŚâŚâŚâŚâŚâŚ..âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
118
Code Format âŚâŚâŚâŚ..âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
119
Comment âŚâŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
120
Colors and Backgrounds âŚâŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
121
Font âŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
130
Text âŚâŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
138
Link âŚâŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚ.âŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
143
Grouping of elements (class and id) âŚ..âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
150
Grouping of elements (span and div) âŚ.âŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
153
The box model âŚâŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
156
Margin âŚâŚ.âŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
159
Padding .âŚâŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
160
Borders âŚâŚâŚâŚ..âŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
161
Height and Width âŚâŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
166
Floating ..âŚâŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
167
Positioning of Elements âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
172
z-index (Layers) âŚâŚâŚâŚâŚâŚâŚâŚ..âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
177
Building Website with HTML + CSS âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
180
Page 5 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET Web Design Concepts
-----> HTML
áá˛á
CSS Web Programming
áąááˇáąááźááŻá
áá ááá¸áá˝áŹ
ááááááŻááááá¸á
ážáááłááá¸áżááá¸ááá¸áááá¸áś
áĄááŻááá¸áˇáąááˇáąááź ááááŹáˇááá¸áśáá˛á áĄáášáá¸áĄááá¸áąááźááŻá áĄááá¸ááŻáľáˇáąááŹá¸áżáááŻááá¸ááŤááá¸á ááá¸ááŻáááááá¸áśáá˛á áĄááŻááá¸áˇáąááźáá˛ááŻáááá¸áąááŹáś áá˝áźáá¸áąááŹá¸ááŻáá Programming áá˝áŹ Coding áąááˇááŹá áĄá Variables áá˝áá¸áá˝áá¸ááá¸ááá¸áąááˇááżááá¸áˇá Code áąááźááŻá Tab ááŻáá¸ááá¸áśáá˛ááąáááŹáąááźááŻá Tab áá˛áááźá˛áżááŹáˇááŹáˇáżááŽáˇá áĄáá°áˇáżááłááŹáˇáá˛á áąáááŹáąááˇáąááźááŻá áąááŹáá¸ááḠProgrammer áąááŹá¸ááá¸áˇáąááŹáá¸áˇ áááŻááááŻáḠááááááŻááá¸ááŻááḠáżááá¸ááá¸áżááá¸ááá¸ááḠááŻáááá¸ááźáá¸áá°áąáĄáŹáḠComment áąááˇáąááźááŹáˇááá¸áśááḠááŹáˇáąááˇáááŤááá¸á ááá¸áśáąáášáŹá¸áá˛á Variable áąááˇááá¸ááŻáááŹááąááŹáś p.center {text-align: center} ááŻááá˛ááąáááŹáá˝áŹ p.test {textalign: center} ááŻáááąááˇááá¸ááá¸áˇ áááŤááá¸á ááŤáąááá˛á ááá¸áˇ CSS Coding áá˛á Variable áąážááżááŹááŹáˇáá˛á test ááŻááá˛á id class selector áᏠáá°ááá˛á Value áżáá á¸áá˛á center áá˛á ááĄáá¸ááá¸ááŤáá°áˇá áááŻááá¸ááá¸áá˛á Variable ááŻá Assign ááŻáá¸áá˛áááá¸ááŻáááḠáąááŹáá¸ááŻááá¸áˇ áá˝áźáá¸áąááŹá¸ááŻáá áĄá˛á Variable ááŻááá°ááŻáľáˇááḠááźá˛áá˝áŹáˇááźáŹáˇááá¸ááŤááá¸á áąááŹáá¸áá á¸ááŻá Captical & Small letter
áąááźááŤáá˛á áá˝áźáá¸áąááŹá¸ááŻáá Programming áąááˇááŹáˇáá˛ááąáááŹáá˝áŹ
ááááááŻáááá˝áŹ áĄáąááśáĄáášáá¸áśáąááˇáá á¸ááŻáżáá á¸áąááąáĄáŹáḠáżááłááŻáá¸ááŹáˇááá˝áŹá ááŻááá¸áąááźá Variable áąááźááŻá áĄážááŽáˇááŻáľáˇááá¸ááŻáľáˇ ááŻáááááŻáá¸ááŤá áĄáąááˇáąááźáᲠááŻáľáˇááá¸ááŻáľáˇááŤá áąááŹá¸áąááŹá¸áášáŹáˇáášáŹáˇááąááŹáś file áá˛á áĄááá¸áąááźááŻá áĄáąááˇáá˛áááŻáľáˇážáááŤááá¸á áĄážááŽáˇáĄáąááˇá áá á¸áášáłáá Case Sensitive áżáá á¸áá˛ááąáááŹáąááźáá˝áŹ áĄááá¸áˇááŻá áá˝áŹáˇááá¸ááŤááá¸á áá˝áŹáˇááźáŹáˇáá˛á Error Syntax ááŻá
Trace
ááŻááá¸áá˛ááąáááŹáá˝áŹ
ááŽááŻááĄáąááˇáĄááźá˛áąááˇáąááźá
áĄáżáá á¸áášáŹáˇááá¸áááŻá
ááášáá¸áˇáášáá¸áá˛á
Programmer
áá á¸áąááŹáá¸áĄáąááá˛á ááŻáľáˇážááŻáááżáá á¸áááśá¸ááŤáá°áˇá ááŻááááá¸áˇáĄáá° folder or file áĄááá¸áąááźáá˝áŹ âsâ ááá¸áśáááá¸áśááŻááᏠáĄááá¸ááŻáľáˇ ááŻáľáˇáżááá¸ááŹáˇááá¸áśááŤááá¸á services.html ááŻáááŻáľáˇáááŹáˇá service.html ááŻáááŻáľáˇáááŹáˇááŻááᏠááááááŻááá¸ááŻá áĄááá¸ááŻáľáˇáżááá¸áášáá¸áąááˇáááŤááá¸á ááŽááŻááᲠáá˝áźáá¸áąááŹá¸ááŻáá á áżááŽáˇááąááˇááá¸áá˝áŹ áááá á áŻáááá˛á ááŻáá¸ááá¸áˇ (Project) ááŻááĄáżááŹáˇ ááḠFolder á ááḠFile áá˛ááá˝ ááąááŹááźáŹáˇáąáĄáŹáá¸
áąááŹáá¸ááŻááá¸áˇáá˝áŹ
ááŽáˇááá¸ááąááŹáá¸ááŹáˇááá¸áśááŤááá¸á
áĄááźáá¸ááá°áżááá¸áá˝áŹááŻááááąáĄáŹáá¸
Folder
ááá¸áˇ Folder áá˛áá˝áŹáᲠááááááŻáááá˛á Program File
áášáŹáˇááŻá
ááźá˛ááźá˛áżááŹáˇáżááŹáˇ
áąááźá Image áąááźá Text
áąááźááŻááááá¸áˇááá¸áˇ ááŹáˇááá˝áŹáżáá á¸ááŤááá¸á
Page 6 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
ááŽááá¸áˇááá¸áˇá
DREAM IT, CODE IT BY PLANETCREATOR .NET
áá˝áźáá¸áąááŹá¸ááŻáá
ááá¸ááá¸á
ááá¸áąááˇáá˝á áŹáĄáŻáá¸áá˝áŹ
á áŹááŻáľáˇážáŻááá¸áˇážáŻááá¸áˇáąááˇáąááźáá˛á
áąááˇáżááŽáˇ
áąááśáášáá¸áśáááŻáááŤáá˛á Coding áąááˇááŹáˇááŹáąááź áá˝áá¸áˇááá¸áˇáąáżááżáá á¸ááá Programmer áá á¸áąááŹáá¸áá˛á Skill áá á¸ááŻááŤáá˛á
HTML & XHTML HTML ááŻáááŻáľáˇáąááŹáśááá¸ááŻáááḠHTML áĄáżááḠXHTML áá˛á ááŽáá˝á á¸ááŻážááŹáˇáá˝áŹ ááá¸ááŹááŻá ááŻáľáˇááá¸áąááŹáá¸áˇááá˛á áá°ááŻáááá˝á á¸ááŻá ááŹáąááźááźá˛áżááŹáˇáżááŹáˇááŹáˇááá˛ááŻááᏠáááášáá¸ážáááŤáááá¸áśááá¸á ááŤááá¸áá doctypes áá˛á DTDs áąááźá ááááááŻáááááŻááŻááżááŽáˇáááá¸áąááźáˇáąá ááŤááá¸á
ááá¸ááŻááá˛áżáá á¸áąá
áąááŹáá¸ááŻáľáˇáá˝áŹáąááŹáś
áá˝áźáá¸áąááŹá¸ááŻáááĄáżáá˛ááŻáľáˇáąááá˛á
Internet
á áŹáášáá¸áá˝áŹáąááá áĄáąáżáááľ Web Page Structure áąááźááŻááąááŹáś ááŹáˇááá¸áášáá¸ážáááŤáááá¸áśááá¸á ááŽáĄááŻááá¸áˇáąááźááŻááąááśááŹáżáá á¸ááḠááá¸ááŻáá HTML áá˛á XHTML áąááźáá˛á áĄááá¸áśáżááá¸áś concepts áąááź áąááŹáá¸áˇáąááŹáá¸áˇ ááŹáˇááḠááźáŹáˇááŤááááśá¸ááá¸á
Doctypes Doctypes ááŻáááŹá áá˝áźáá¸áąááŹá¸ááŻáááąááˇááŹáˇááŹáˇáá˛á Markup Lanuage áᏠááá¸ááŻá Version áĄáášáłááˇáĄá áŹáˇ áżáá á¸ááá¸ááŻááᏠWeb Browser áĄáŹáˇ áĄáááąááˇáąáżááŹážááŹáˇááŹáˇááŹáżáá á¸áżááŽáˇá Web Page Source áá˛á áĄáąááááŻáľáˇáĄááŻááá¸áˇáá˝áŹ áá˝ááąá (áá˝ááąáááá¸áś) ááŤááá¸á áá°áááŻááĄáááášáŹáˇááŹááąááŹáś Document Type Definition ááŻáááááŻáḠDTD ááŻááżááŽáˇ áá°áááášáŹáˇááŤááááśá¸ááá¸á DTD á Web Browser á áá˝áá¸áá˝áá¸ááá¸ááá¸áąááŹá¸áżáááŻááá¸ááŻáááĄááźáḠMarkup áąááźáá˛á á áá¸áˇááá¸áˇáąááźááŻá áášáá˝áá¸áąááˇááŤááá¸á
Page 7 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS Web
Page
DREAM IT, CODE IT BY PLANETCREATOR .NET
áá á¸ááŻá ááá¸áżááŽáˇáąááˇááŻááá¸áˇáá˝áŹ
Doctype
ááŻáááá¸áśáąááˇáááá¸ááŻáááá¸
áĄáášááá¸ážááŹááá¸á
áá˝áŹáˇááźáŹáˇááŻááá¸áá˛ááĄááźáḠWeb Editor áąááŹá¸áąááŹá¸áášáŹáˇáášáŹáˇá ááá¸áˇááŻáááĄáŹáˇ áĄáááŻáĄáąáášáŹáá¸ááá¸áśááźáá¸áˇááŹáˇááá¸ááŤááá¸á <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Doctype ááŻáá ááá¸áąááˇááŹáˇáąááŹáśááá¸ááŻáááḠ<!DOCTYPE ááŻâáŻááżááŽáˇ ááá¸áˇáĄáŹáˇ á áŹááŻáľáˇážááŽáˇáá˛ááąááˇááŹáˇáááŤááá¸á <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
áąááŹáá¸áá á¸ááŻá HTML á፠(áĄááá¸á XHTML ááŻáááá¸áąááŹáś ááá¸áˇ HTML ááŤáá˛)á ááŻáááŻáááŹá áᎠDocument áĄááźáḠHTML ááŻáááŹá root element áá á¸ááŻáżáá á¸áąážááŹáá¸áˇáá˛á validation áĄááźáá¸ááŹáżáá á¸ááŤááá¸á <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
PUBLIC ááŻáááŹááąááŹáś áá˝áźáá¸áąááŹá¸ááŻáááá˛á Browser áĄááźáḠDTD á áĄáášáŹáˇáá˛á ááá¸ááŻááá¸áá˛á resource áżáá á¸áąážááŹáá¸áˇ áąááˇááŹáˇááŹáżáá á¸ááŤááá¸á áĄááá¸á ááááá XHTML ááŻáááááŻáḠHTML áá˛á ááá¸áá˝áá¸ááŹáˇááŹáąááźááŻá áąáášáŹá¸ááźáá¸áżááŽáˇááŻáľáˇáášáá¸ááá¸ááŻáááá¸áąááŹáś
ááŻááá¸ááŻááá¸
DTD
ááŻáááá¸ááŽáˇáááŤáááá¸áśááá¸á
ááŤááŻáááá¸
ááŻááá¸ááŻááá¸
element
áąááźááŻáááá¸ááŽáˇáá˛ááĄá፠áᎠDocument áᏠcustom DTD áżáá á¸áąážááŹáá¸áˇ validate ááŻáá¸áá˛ááĄá፠ááááŤáááá¸áśááá¸á ááŽáĄááźáḠPUBLIC áąáááŹáá˝áŹ SYSTEM ááŻáááŹááŻááąáżááŹáá¸áˇáᲠáąááˇááŹáˇáąááˇáááŤááá¸á ááŤáąááá˛á áá˝áźáá¸áąááŹá¸ááŻáááąááź ááŽááŻáááŻáľáˇááŹáąááźááŻá áąááźáááá˛ááŤááá¸á áąááŹá¸áąááŹá¸áášáŹáˇáášáŹáˇáá°áąááźááąááŹáś HTML áá˛á XHTML ááŻáááá˛á ááá¸áá˝áá¸áášáá¸áąááŹáá¸áĄááźáá¸áˇáá˝áŹáᲠááŻáľáˇážáááŹáášáŹáˇááŤááá¸á <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
áąááŹáá¸ááá¸áá á¸ááŻááąááŹáś áááá¸áˇáááá¸áˇáąá áŹáá¸áśáąáá˝áŹáá¸áá°ááŻá áąááŹá¸áąááŹá¸áášáŹáˇáášáŹáˇ
Public
Identifier
áąáżááŹááŹáˇááŹáżáá á¸ááŤááá¸á
ááááŹáˇážáááŤáááá¸áśááá¸á
áá°á
ááŻáááŹáá˛áżáá á¸ááá¸á W3C
Public
ááŻáááá¸
DTD
áá˛á
Web Programming
Identifier
áżáá á¸áżááŽáˇ
ááŻááá¸áá˝áá¸
ááŻáááááŻáá¸
áąááśááŹáá°áąááź
áááááąááˇááŹáˇáá˛á
Language
áĄááá¸áśááŻááąááŹá¸áżááąááˇááŹáˇááŹáżáá á¸ááŤááḠ(XHTML 1.0)á áááááąááˇááŹáˇááá¸áś Web Page áá˛á content áá˛ááąááŹáś áááá¸ááŻááḠááŤáá°áˇá áąááŹáá¸áá á¸á፠áąááˇááŹáˇááŹáˇáá˛á Language ááŤáá˛á English ááŹááŹáá˛á áąááˇááŹáˇááŹáˇááŹáżáá á¸áá˛ááĄááźáḠEN ááŻááżááŽáˇ áĄááŻááąááŹáá¸áąááŹá¸áżáááżááá¸áˇáżáá á¸ááŤááá¸á áá˝áá¸áášáá¸á
á áĄááá¸á DOCTYPE áá˝áŹ SYSTEM ááŻááá˛á á áŹááŹáˇáá á¸ááŻááŤááá¸ááŻáááá¸áąááŹáś áĄáᯠPublic Identifier á áášáá¸ááźáŹáˇááŤáááá¸áśááá¸á
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Page 8 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS áąááŹáá¸ááŻáľáˇáá á¸ááŻááąááŹáś
DREAM IT, CODE IT BY PLANETCREATOR .NET URL(Uniform
Resources
Locator)
áá˛áżáá á¸ááá¸á
ááŽ
URL á
DTD
áá˛á
áąáááŹááá¸áˇáąážááŹáá¸áˇááŻááąááŹá¸áżááąááˇááŹáˇááŹáżáá á¸áżááŽáˇ ááŻáááŻááḠWebsite áá˝áŹáąáżááŹáá¸áˇáá˛ááá¸áášáá¸ááá¸áąááŹáś ááᯠDTD ááŻá download ááŻáá¸áżááŽáˇ ááŻáľáˇááŻááá¸ááŤááá¸á ááŤáąááá˛á ááŽááŻááĄááŻáľáˇáżááłááááŻááąááŹáś ááŻáľáˇážáááŻáá¸áááśá¸ááŤáá°áˇá áąáĄáŹáá¸á áááŹáˇáąááˇááąááŹáś W3C á áĄážááľáżááłááŻáá¸áąááˇááŹáˇáá˛á doctypes áąááźáá˛áżáá á¸ááŤááá¸á non-strict elements áąááźááąááŹáś # APPLET - Java applet # BASEFONT - Base font change # CENTER - Centered block # DIR - Directory list # FONT - Font change # FRAME - Frame # FRAMESET - Frameset # IFRAME - Inline frame # ISINDEX - Input prompt # MENU - Menu list # NOFRAMES - Frames alternate content # S - Strike-through text # U - Underlined text Doctype
Description
<!DOCTYPE html PUBLIC "-//W3C//DTD
HTML 4.01 Strict allows the inclusion of structural and semantic
⼠HTML 4.01//EN"
markup, but not presentational or deprecated elements such as
"http://www.w3.org/TR/html4/ âĽstrict.dtd">
font, framesets are not allowed.
<!DOCTYPE html PUBLIC "-//W3C//DTD
HTML 4.01 Transitional allows the use of structural and semantic
⼠HTML 4.01 Transitional//EN"
markup as well as presentational elements (such as ,
"http://www.w3.org/TR/html4/ âĽloose.dtd">
which are deprecated in Strict. Framesets are not allowed.
<!DOCTYPE html PUBLIC "-//W3C//DTD
HTML 4.01 Frameset applies the same rules as HTML 4.01
⼠HTML 4.01 Frameset//EN"
Transitional, but allows the use of frameset content.
"http://www.w3.org/TR/html4/ âĽframeset.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict, like HTML4.01 Strict, allows the use of
⼠XHTML 1.0 Strict//EN"
structural and semantic markup, but not presentational or
"http://www.w3.org/TR/xhtml1/DTD âĽxhtml1-strict.dtd">
Page 9 of 197
deprecated elements (such as font, framesets are not allowed. Unlike HTML 4.01, the markup must be written as well-formed
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional, like HTML4.01 Transitional, allows the
⼠XHTML 1.0 Transitional//EN"
use of structural and semantic markup as well as presentational
"http://www.w3.org/TR/xhtml1/DTD
elements (such as, which are deprecated in Strict; framesets are
âĽxhtml1-transitional.dtd">
not allowed. Unlike HTML 4.01, the markup must be written as well-formed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Frameset ááŻááᏠXHTML 1.0 Transitional áá˛á
⼠XHTML 1.0 Frameset//EN"
áá°ááŤááá¸á ááŤáąááá˛ááá°á frameset ááŤááŻáľáˇááŻáááĄááźáá¸ááŤá
"http://www.w3.org/TR/xhtml1/DTD/ âĽxhtml1-frameset.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.1 á XHTML 1.0 Strict áĄáŹáˇáżááá¸ááḠáżááá¸ááá¸ááŹáˇ
⼠XHTML 1.1//EN"
ááŹáá˛áżáá á¸ááŤááá¸á
"http://www.w3.org/TR/xhtml11/DTD/
áá°áˇáżááŹáˇááááąááŹáś
âĽxhtml11.dtd">
Korean
áĄáąáżáááľ
XHTML
1.0
áá˝áźáá¸áąááŹá¸ááŻáááĄáąááá˛á
characters
áąááźáĄááźáá¸
áąááź
Chinese, Ruby
áá˛ááá°áżááŽáˇ
áá°ááá˛á
Japanese,
and
ááŻáááŻáľáˇáá˛ááĄááŤ
Module
ááá¸áśááá¸ááŻáááḠááá¸áśááźáá¸áˇáĄááŻáľáˇáżááłááŻáááááŤááá¸á
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML
⼠HTML 3.2 Final//EN">
áááŻááá¸ááźáá¸áˇááŤáá°áˇá áąáá˝áˇáášááźáá¸áˇááźáŹáˇááŤáżááŽá
<!DOCTYPE HTML PUBLIC "-//IETF//DTD
HTML
⼠HTML 3.0//EN">
áááŻááá¸ááźáá¸áˇááŤáá°áˇ
<!DOCTYPE HTML PUBLIC "-//IETF//DTD
HTML
⼠HTML 2.0 Level 2//EN">
áááŻááá¸ááźáá¸áˇááŤáá°áˇá áąááŹá¸áżááąááˇááŻáľááŽáˇááá¸áááŤáá˛á
3.2 3.0 2.0
áĄááźáḠáĄááźáḠáĄááźáá¸
Doctype
áżáá á¸áżááŽáˇ
áĄááŻáĄáášááá¸áá˝áŹáąááŹáś
ááŻáľáˇááŻáá
Doctype
áżáá á¸áżááŽáˇ
áĄááŻáĄáášááá¸áá˝áŹáąááŹáś
ááŻáľáˇááŻáá
Doctype
áżáá á¸áżááŽáˇ
áĄááŻáĄáášááá¸áá˝áŹáąááŹáś
ááŻáľáˇááŻáá
ááŽáąááŹáś ááááááŻáááąááˇáá˛á Doctype áĄáąáááá˝áŹááááá¸áżááŽáˇáąááŹáś Browser á ááááááŻáááąááˇááŹáˇááŹáˇáá˛á Web Page ááŻá Quirks Mode, Standard Mode, Almost Standard Mode á ááá¸áżáá á¸áąáááąá ááŤááá¸á 1990 áąáá˝áŹáá¸áˇááŻááá¸áˇá Web Page áąááŹá¸áąááŹá¸áášáŹáˇáášáŹáˇáá˝áŹ ááŻáľáˇážáááŤááá¸á áᎠMode áá˝áŹ Browser á ááŻáľáá˝áḠWeb ááŻáľá áľ áááŻáá¸áᲠWeb page áá˛á ááŹááŹáĄáášáłááˇáĄá áŹáˇ áąáááá˝áŹááááá¸áżááŽáˇáąááŹáś áąáżááŹáá¸áˇáá˛áąááˇáżááá¸áˇáżáá á¸ááŤááá¸á ááŤáááá¸áˇ Browser áĄáąáááá˝áŹááááá¸áżááŽáˇ ááźá˛áżááŹáˇááŤááá¸á IE 6,7 áá˝áŹáąááŹáś Quirks Mode á áĄááḠIE Version 5.5 ááŻáľá áľááŤáá˛á ááŻáááąááá˛á áĄáżááŹáˇ Browser áąááźáá˝áŹáąááŹáś Almost Standars Mode áá˝ áąááŹáá¸ááŻáá¸áášáá¸ááŻááááŤážáá¸ááŤááá¸á Standard Mode ááąááŹáś Browser áąááźá Document áĄáá˛áá˝áŹááŤáá˛á áĄááŻááá¸áˇ áĄáááĄááš ááŻáľáąááŹá¸áąááˇáąááá˛á áĄáášááłááĄááŻááá¸áˇáąááźáá˝áŹáąááŹáś Browser áá˛á áąááŹáá¸ááźáá¸áášáá¸áĄáąáááá˝áŹ ááááá¸áąáááŤáąááˇááá¸á Firefox, Safari áá˛á Opera (Version 7.5 áá˝áá¸áśáĄááá¸) áąááźá Almost Standars Mode áąááźáá˛áżáá á¸áᏠCSS áá˝áŹ áášááŹáˇáá˛á Specification áĄááŻááá¸áˇáááŻáá¸áᲠáĄááá¸áĄáąááŹáá¸áˇ ááŻáľá áľáąááźáá˝áŹ table cells áąááźáĄááźáḠáąáżááŹáá¸áˇáá˛áąááŹá¸áąááŹáá¸áąááˇááŤááá¸á
áá á¸ááá¸áˇáĄáŹáˇáżááá¸áś
ááŻáľá áľáášáąáĄáŹáá¸
ááá¸ááŽáˇáąááˇááá¸áąááŤáá
vertical áĄáżáá Ḡá áŹáášáá¸áá˝áŹáąááź
ááźá˛ááąá áŹáá¸áˇáąáááŹáąááźááŻá Fix ááŻáá¸áąááˇáá˛á ááąááŹáá˛á Internet Explorer versios 6 áá˛á 7 ááąááŹáś áĄá˛áááŻáááŻáľá áľáááŻáá¸ááŤáá°áˇá áĽáááŹáĄáąááá˛á ážáááśá¸ááá¸ááŻáááá¸
Page 10 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
IE 6 áá˝áŹ Browser áĄáŹáˇ W3C áá˛á Box Model calculations áĄá Standard Mode áĄáżááá¸áś áżáá á¸áąáááąá áżááŽáˇ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
ááŽáĄáąááá Doctype áá˝áŹááŻáááá¸áąááŹáś W3C áá˛á Method ááŻááááŻáľáˇáᲠáĄááá¸áĄáąááŹáá¸áˇááŻááᲠááŻáľáˇááŤáááá¸áśááá¸á ááŤáᏠQuirks Mode áá˛á Standard Mode ááŻáááá˛á ááźá˛áżááŹáˇááááŤáá˛á
HTML áá˝áá¸áś XHTML ááŻáá ááźá˛áżááŹáˇáá
HTML ááŻááąááśááŹáąááá˛ááá°áąááźá XHTML áá˛á áĄáá°áá°áá˛á ááá¸áá˛ááááŻááąááźáááá˝áŹáááŻáá¸ááŤáá°áˇá ááŤáąááá˛á áá°ááŻáááá˝á á¸ááŻáá˛á ááźá˛áżááŹáˇáá˛á áĄááá áĄáášáá¸áąááˇáąááźááŻááąááŹáś ááááŹáˇáááśá¸ááŤááá¸á áĄááááĄáŹáˇáżááá¸áśThe Most Important Differences:
* XHTML elements must be properly nested * XHTML elements must always be closed * XHTML elements must be in lowercase * XHTML documents must have one root element
HTML áá˝áŹ áá á¸áášáłáá tag áąááźáĄáŹáˇ áąáá˝ááąááŹáḠáááŽááá¸áˇ áĄááŻáľáˇáżááłááŻáááááŤááá¸á HTML
<b><i>This text is bold and italic</b></i>
áĄáąáááá˝áŹážáááśá¸ááá¸ááŻáááḠ<b> ááŻááá˛á open tag á áąáá˝áááŻáľáˇáá˝áŹ áá˝ááąááżááŽáˇ </b> ááŻááá˛á closing tag á áąááŹáá¸ááŻáľáˇáá˝áŹ áąááŹáá¸áąáááŤááá¸á áąáá˝ááąááŹáá¸áĄá áŽáĄá áĽá¸áĄááŻááá¸áˇáááŻáá¸áá°áˇáąááŤáá ááŽááŻáááŻáľá áľááŻá HTML áá˝áŹááŻáľáˇááŻáááááá¸áąááŤá ⌠ááŤáąááá˛á XHTML áá˝áŹáąááŹáś áĄá˛áááŻáááááŤáá°áˇá XHTML
<b><i>This text is bold and italic</i></b>
ááŽáąááŹáá¸ááŻáááḠXHTML áá˛á Proper Nested áĄáąážááŹáá¸áˇááŻá áááąááŹáá¸ááŤáżááŽáˇá áĽááᏠáá á¸ááŻááá¸ážááá¸áśááŻááá¸ááŤá XHTML Nested
<ul> <li>Coffee</li> <li>Tea
Page 11 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS áĄáá˝áŹáˇ(X)
DREAM IT, CODE IT BY PLANETCREATOR .NET
<ul> <li>Black tea</li> <li>Green tea</li> </ul> <li>Milk</li> </ul>
XHTML
<ul>
Nested
<li>Coffee</li>
áĄáá˝áá¸(â)
<li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul>
áąááŹáá¸áá á¸ááŻá XHTML Elements ááŻááá¸áˇáá˝áŹ closing tag áąááźáĄáżáá˛áá˝ááąááááŤááá¸á XHTML
<p>This is a paragraph
Closed
<p>This is another paragraph
áĄáá˝áŹáˇ(X) XHTML
<p>This is a paragraph</p>
Closed
<p>This is another paragraph</p>
áĄáá˝áá¸(â) Empty Elements áąááźááŻáááá¸áˇ XHTML áá˝áŹ áááá¸ááŻááááŻáááŤááá¸á XHTML
A break: <br>
Empty
A horizontal rule: <hr>
Elements
An image: <img src="happy.gif" alt="Happy face">
áĄáá˝áŹáˇ(X) XHTML
A break: <br />
Empty
A horizontal rule: <hr />
Elements
An image: <img src="happy.gif" alt="Happy face" />
áĄáá˝áá¸(â)
Page 12 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
áąááŹáá¸áá á¸ááŻááąááŹáś XHTML Elements ááŻááá¸áˇáá˝áŹ Tag name áąááźá Attribute áąááźáĄáŹáˇááŻáľáˇá lower case áąááźáżáá á¸áááŤááá¸á HTML áá˝áŹáąááŹáś ááá¸áˇ Elements áąááźá áĄážááŽáˇáĄáąáᡠááá áĽááá˝áááŤáá°áˇá XHTML
<BODY>
Lowercase
<P>This is a paragraph</P>
áĄáá˝áŹáˇ(X)
</BODY>
XHTML
<body>
Lowercase
<p>This is a paragraph</p>
áĄáá˝áá¸(â)
</body>
ááŤáąážááŹáá¸áś
XHTML
á
Case
Sensitive
áżáá á¸ááá¸ááŻááááŻáááŻááá¸ááŤááá¸á
HTML
áá˝áŹáąááŹáś
<P>âŚ</p>
áĄá˛áááŻááżáá á¸ááŻááááá¸áˇááŹáá˝ááżáá á¸ááŤáá°áˇá áąááˇááŻáááááŤááá¸á ááŽááŻááᲠXHTML áá˝áŹ Root Element áżáá á¸áá˛á <HTML> áá˛á áĄááźáá¸áˇáá˛áá˝áŹáᲠChild Elements áąááźáĄáŹáˇááŻáľáˇá áĄá áŻáľááŻááá¸áąááźáá˝ááąááááŤááá¸á XHTML
<html>
Root
<head> ... </head>
Element
<body> ... </body> </html>
XHTML
<!DOCTYPE Doctype goes here>
Doctype
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Title goes here</title> </head>
<body> <p>This is XHTML</p> </body> </html>
XHTML áá˛á Doctype áá˝áŹ html ááŻáá áąááˇááḠ<html xmlns="http://www.w3.org/1999/xhtml"> ááŻááżááŽáˇ <html> tag ááŻááąáᡠááżáá á¸ááąááąááˇáąááˇáááŤááḠ⌠ááŤáá˝ W3C validate áżáá á¸áá˝áŹááŤá
Page 13 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
áá˛âŚ ááŤááąááŹáś XHTML áá˛á HTML ááŻáááá˛á áĄááááášáá˛á ááźá˛áżááŹáˇáááąááˇáąááźááŤáᲠ⌠ááŽáąááŹáá¸ááŻáááá¸áąááŹáś áąáá˝áááá¸ááźáŹáˇááŻáááááŤáżáᎠâŚ..
History of HTML European Organization for Nuclear Research (CERN) áá˝áŹ ááŻáá¸ááŻááá¸áąááá˛á áá°ááąáááááŹáá˝áḠTim Berners-Lee áá ááá¸áá˛áááŤááá¸á 1989 ááŻáá˝á á¸áá˛á 1991 ááŻáá˝á Ḡá áá˝á á¸ááá¸ááĄááźáá¸áˇáá˝áŹ World Wide, Web Page áąááź ááá¸ááŽáˇááŻáááĄááźáḠHTML (hypertext markup language), HTTP (HyperText Transfer Protocol) áá˛á URLs (Universal Resource Locators) ááŻááááŻáááá¸ááŽáˇáá˛ááá˛á Father of the Internet áá á¸áĽáŽáˇáżáá á¸ááŤááá¸á ááŻááˇááŻááˇá áŹááŹáˇáąááźáá˛áżáá á¸áá˛á Text áąááźáá˝áŹ tag áąááźááŻáááŻáľáˇáżááŽáˇ ááŻáľáá˛áá ᏠáąááźááŻá browser ááąáážáááśá¸ááááŻááá¸áąáĄáŹáḠááá¸ááŽáˇááŹáˇááŹáżáá á¸ááŤááá¸á ááŤááŻá Hypertext ááŻááżááŽáˇáąááááŻááá˛ááᏠáĄáá˛á ááŻááˇááŻááˇá áŹááŹáˇáá˛á tag áąááźáá˛áááŻá <> ááŻáá¸ááŹáˇááŹááŻá Markup ááŻáá¸ááŹáˇááŹáżáá á¸ááŤááá¸á TBL áá˛á ááźá˛ááá¸ááŻáá¸ááŻááá¸áá˛ááá˛ááá°ááá¸áˇáá˝áááŤááá¸á áá°ááąááŹáś CERN áá˛á data systems engineer Robert Cailliau ááŤá
HTML áĄáąážááŹáá¸áˇ
HTML ááŻááąááśááŹáąááŹáśááá¸ááŻáááá¸
áá°ááŻáááá˝áŹááŤážáá¸áá˛á áĄáąáááĄáąážááąááˇáąááź áá˛á ááá¸áˇááŻáááá˛á áĄáąážááŹáá¸áˇááŻá
áĄááá¸ááŻáľáˇááááŹáˇááá¸áśááŤááá¸á áĄá áźáá¸áˇááŻáá¸áąáżááŹáááá¸ááŻáááḠText áá˛á Tag ááŻáááŹááŻááąááŹáḠáżááá¸ááŹáá°áášáłááˇáąááź áĄááźáḠáĄááľááźáá¸áąááˇáąááź ááźá˛ááźá˛áżááŹáˇáżááŹáˇáąááááŻááᏠááąááŹáąááźáˇááŻááááŻáááŤááá¸á HTML
HTML ááŻááᏠ(HyperText Markup Language) áá˛á áĄááŻááąááŹáá¸áá˛áżáá á¸ááŤááá¸á HTML ááḠCSS áá˝áá¸áś JavaScript áá˛áááŻááááḠWebserver ááŽááŻááááá¸ááźáá¸á ááŹáááŻááᲠbrowser áá˝ ááŻááá¸áááŻáḠInterpret ááŻáá¸ááŻááá¸ááá¸áśáĄááźáḠáĄáżááŹáˇ server side áášáŹáˇáżáá á¸ááá¸áś ASP, PHP áąááźááḠááŻáá áżááá¸ááá¸ááá¸á
HTML ááŻá Static HTML áá˛á Dynamic HTML ááŻááżááŽáˇ áá˝á á¸áášáłááˇááźá˛áżááŹáˇááŻááá¸ááḠ⌠Static ááŻáááŹááąááŹáś ááŻáľáąááąááŤáá áá˝áźáá¸áąááŹá¸ááŻááá .html ááŻá Web Server áĄáąááááŻá Upload ááŻáá¸áżááŽáˇáżááŽááŻáááŹáá˛á Internet áĄáąáááá˝áŹ áżááá¸ááá¸áżááá¸ááá¸ááŻáá áááźáá¸áá°áąááŹáśááŤáá°áˇá Static HTML ááŻááąááŹáś Individual áá˛á áĄáąááˇá áŹáˇ á áŽáˇááźáŹáˇáąááˇááŻáá¸ááá¸áˇáąááˇáąááźá ááá¸áˇááŻáááá˛á Profile áąááźáá˛á ááŻáá¸ááá¸áˇáąááźáĄáąážááŹáá¸áˇááŻá áááá¸áśááá¸ááŻáááĄááźáḠáĄááŻáľáˇáżááłážáááŤááá¸á ááŤáąááá˛á Dynamic HTML ááŻáááá¸áąááŹáś áĄá˛áááŻááááŻáá¸áąááŹáśáá°áˇ áĄáá¸ááŹááḠWebserver áĄáąááááá¸áżááŽáˇ áĄááźáá¸ááá° áżááá¸ááá¸áżááá¸ááá¸áááąááźáżááłááŻáá¸ááŻááá¸ááá¸á áĄáżáá˛ááá¸áˇ Update ááŻáá¸ááŻááá¸ááá¸á áá°áááŻááąááŹáś Blogging, Ecommerce, Banking, News and Multimedia á ááá¸áś áĄáżáá˛ááá¸áˇ áżááá¸ááá¸ááŻáááĄááźáḠááŻááĄáá¸áá˛á Website áąááźáá˝áŹ áĄááŻáľáˇáżááłážáááá¸á
Page 14 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
áá°ááá˛á structure ááąááŹáś <HTML> <HEAD> <TITLE>HTML</TITLE> </HEAD> <BODY> <TABLE BORDER=1> <TR><TD>Hello</TD></TR> <TR><TD>World</TD></TR> </TABLE> </BODY> </HTML>
ááŤá HTML áá˛á ááźá˛áá áá¸ááá¸áąááŹáá¸ááŻáľ áąááˇááŤá áąááŹáá¸áá á¸ááŻá
HTML
á ááá¸ááŻááááŻáááá¸áˇ
Programming
ááŻáááá¸áá˝áźáá¸áˇááźáŹáˇááá¸
ááá¸ááźášáá¸áˇááŻáááááá¸áááá¸áá˛áąááŹáśááŤáá°áˇá
áĄáżááŹáˇáąáᏠáá°ááŻáááąááźá
CSS,
JS,
php
áá á¸ááŻáá˛ááá á¸ááŻ
áá˝áŽááŻááąááášáąáááŹááŤá
Page 15 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
Code (filename.php)
áá˝áá¸áˇááá¸áˇáášáá¸
<?php
áĄá ááá¸áˇáąááŹáḠ= PHP
echo "This PHP"
áĄáżááŹáąááŹáḠ= CSS
?> <html>
áĄááŽáąááŹáá¸
= JS
áĄáżááŹáˇá
= HTML
<head> <title>This is php,html,js</title> <style> P { text-align: center; color: red; font-family: arial } </style> </head> <body> <br> <p> <script type="text/javascript"> document.write("This is my first JavaScript!"); </script> </p> </body> </html> Page 16 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS -filename.php
DREAM IT, CODE IT BY PLANETCREATOR .NET ááŻááᏠphp áá˛ááąááˇááŹáˇááŹ
áżáá á¸ááŤááá¸á ááŽáĄáá˛áá˝áŹááŻáááḠhtml,css,js,php
ááŤáąááźááŤážáá¸áąáááŹááŤáá˛á
áĄáááááŻáááŻáááŹá HTML á Webpage áąááź ááá¸ááŽáˇáá˛ááąáááŹáá˝áŹ áĄááááášáá˛á á Web Designer, Web Developer ááŻááá¸áˇáááááżáá ḠááááŹáˇááá¸áśáá˛á áĄáąáżáááľ Language áá á¸áášáłááˇáżáá á¸ááá¸ááŻáááŹááŤáᲠá
Source Code
HTML ááźáḠáĄááá¸ááŤáĄááŻááá¸áˇáżááá¸áááá¸áĄááźáḠááá¸áˇááąááŹáá¸ááźáá¸áá˝ áąááˇááŹáˇááŹáˇáąáᏠCode áášáŹáˇááŻá áąááááŻáááá¸á HTML ááḠClient Side áżáá á¸ááá¸áśáĄááźáḠSource Code áášáŹáˇááŻá Browser á Page Source áá˝áá á¸ááá¸áśážááá¸áśááŻááá¸ááá¸á
ááŻááá˛áááŻáážáááśá¸ááá¸áĄááźáḠMozilla Firefox ááźáḠView Menu áá˝áá á¸ááá¸áś Page Source ááŻááżááŽáˇážááá¸áśááŻááá¸áááŻá Internet Explorer ááźáḠView Menu áá˝ Source ááŻáááŻááá¸á ážááá¸áśááŻááá¸ááá¸á
(ááŻáááááŻáḠ) Ctrl + U ááŻááżááŽáˇ Keyboard á áąá ááŻááá¸ááŻááá¸áąááááŻáááŻááá¸ááŤááá¸á <!DOCTYPE Doctype goes here> <html xmlns="http://www.w3.org/1999/xhtml">
Page 17 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<head> <title>Title goes here</title> </head> <body> <p>This is XHTML</p> </body> </html>
HTML Colour
HTML, CSS áąááźáá˛á Colour ááŻá Colour Name ááŻáááááŻáḠHex Colour (Hexadecimal Colour) ááŻááżááŽáˇ áá˝á á¸ááŻááŻáľáˇááŻááá¸ááŤááá¸á Colour Name áá˛ááąááŹá¸áżáááá¸ááŻáááŹááąááŹáś - áĽááᏠ<body bgcolor=âredâ> ááŻáááá¸
background
áĄáąááŹáá¸á
Red
ááŻááá˛á
áĄááŽáąááŹáá¸ážáá¸ááźáŹáˇááŤáááá¸áśááá¸âŚ
Colour
Code
áá˛ááąááŹá¸áżáááá¸ááŻáááá¸áąááŹáś # sign áąááˇáá˛ááąáá˝ááá˝áŹáąááˇáżááááŤááḠ⌠áĽááᏠ<body bgcolor=â#ff0000â> ááŻááżááŽáˇáąááˇáááŤááá¸á CSS á Colour ááŻá color: rgb(255,205,188); ááŻááżááŽáˇáąááˇááŻáááááŤááá¸á Colour
ááŻááĄááá¸áąááźááá¸áżááŽáˇáąááˇáá˛ááąáááŹáá˝áŹ
áĄááá¸ááŻááĄááŻáá¸áááááŻááá¸áááŻá
áá˝áźáá¸áąááŹá¸ááŻááá
áá˝áá¸áááŹááá¸áˇááá¸ááŤáááá¸áśááá¸á
ááá¸áˇáĄáąááŹáá¸áąááźáá˛á
ááŹááŹáá¸
áá˝áá¸ááááźáá¸áá˛á
áĄáąááŹáá¸áąááˇáąááźááŻááᏠááá¸ááá¸áˇáášáżááŽáˇáąááˇááá¸ážáááŤááá¸á áĽááᏠ- aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow á ááá¸áąááŤáá ááŤáąážááŹáá¸áś Colour Name áá˛ááąááˇááá¸áśáĄá áŹáˇ HTML, CSS colour áąááźááŻá Hex Code áąááźáá˛ááąááˇááŹá ááŻááżááŽáˇáááášáá˛á áĄáąááŹáá¸ááźáá¸ááŻááá¸áááŻá áĄáąááŹáá¸áášáłááˇá áŻáľááá¸áˇ ááŻáľáˇááŻááá¸ááŹáąááŤáá áĄáąááŹáá¸áá˝áŹ
áĄááááĄáŹáˇáżááá¸áś
Red,
Green,
Blue
ááŻááżááŽáˇ
áĄáąááŹáá¸ááŻáľáˇáąááŹáá¸áĄáąáá
áĄáąáżáááľááŹáˇááŹáżáá á¸áá˛ááĄááźáḠHex Code áá˝áŹ #rrggbb ááŻááżááŽáˇáżáá á¸ááá¸á áąáá˝ááá˝á á¸ááŻáľáˇá áĄááŽáąááŹáá¸á áĄááá¸áá˝á á¸ááŻáľáˇá
áĄá ááá¸áˇáąááŹáá¸áá˛á
áąááŹáá¸ááŻáľáˇáá˝á á¸ááŻáľáˇááąááŹáś
áĄáżááŹáąááŹáá¸áąááźááŤá
Hexadecimal
áżáá á¸áá˛ááĄááźáḠáá°á 0-9, A-F áąááźáżáá á¸áżááŽáˇ- #FF0000 ááąááŹáś áąáá˝ááá˝á á¸ááŻáľáˇ áĄááŽáąááŹáá¸áżáá á¸áᏠáá ááŻáááá¸áąááŹáś
áĄá˛ááĄááŽáąááŹáá¸á
áá˛áá˛áąáášáŹáśááźáŹáˇááŤáááá¸áśááḠ..
33
áąááŹáá¸ááŻáááá¸áąááŹáś
ááž
ááŹááŻááá¸áááá¸áˇáąááŹáá¸ááŻá áąáášáŹáśáášááźáŹáˇááŤáááá¸áśááḠ⌠ááŤááĽáááŹ
áĄáąááá˛áááŤá
Web
Design
ááŻááá¸áˇááŻááąááśááŹáąááá˛ááá°áąááźá
áąááŹáá¸ááŻááá¸áˇ
Color
áá˛á
ááŽáĄáŻáááŽáąááźáĄáąážááŹáá¸áˇá፠áąááśááŹááŹáˇáá˝ áĄáąáżáááľáąááŹáá¸áˇáá˝áŹááŤá
Page 18 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
Hex Value Red Green Blue 00 ďˇ ďˇ ďˇ ďˇ ďˇ ďˇ
00
00
Red = #FF0000 Green = #00FF00 Blue = #0000FF Cyan (blue and green) = #00FFFF Magenta (red and blue) = #FF00FF Yellow (red and green) = #FFFF00
Code <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>HTML, CSS Colour by WWM</title> </head> <body> <font color="#4B0082">This is Indigo Colour by World Wide Myanmar</font> <br> <font
color="#7B68EE">This
is
MediumSlateBlue
Colour
by
World
Wide
Myanmar</font> <br> <font
color="#FFFF00">This
is
Yellow,
áĄááŽáąááŹáá¸áá˛á
áĄá ááá¸áˇáąááŹáá¸áąááŤáá¸áˇáá˝ášáá¸
áĄážáŤáąááŹáá¸ááźáá¸ááŹááŹááŤá by World Wide Myanmar</font> </body> </html>
Page 19 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
áąáĄáŹáá¸á፠List áąááźá Color Name áá˛á Hex Code áąááźááŻá ááźá˛áżááŽáˇáąááŹá¸áżááąááˇááŹáˇááŤááḠá
Page 20 of 197
Color Name
HEX
Black
#000000
Navy
#000080
DarkBlue
#00008B
MediumBlue
#0000CD
Blue
#0000FF
DarkGreen
#006400
Green
#008000
Teal
#008080
DarkCyan
#008B8B
DeepSkyBlue
#00BFFF
DarkTurquoise
#00CED1
MediumSpringGreen
#00FA9A
Lime
#00FF00
SpringGreen
#00FF7F
Aqua
#00FFFF
Cyan
#00FFFF
MidnightBlue
#191970
DodgerBlue
#1E90FF
LightSeaGreen
#20B2AA
ForestGreen
#228B22
SeaGreen
#2E8B57
DarkSlateGray
#2F4F4F
LimeGreen
#32CD32
MediumSeaGreen
#3CB371
Turquoise
#40E0D0
RoyalBlue
#4169E1
SteelBlue
#4682B4
DarkSlateBlue
#483D8B
MediumTurquoise
#48D1CC
Indigo
#4B0082
DarkOliveGreen
#556B2F
CadetBlue
#5F9EA0
Color
http://www.worldwidemyanmar.com
Web Design HTML and CSS
Page 21 of 197
DREAM IT, CODE IT BY PLANETCREATOR .NET
CornflowerBlue
#6495ED
MediumAquaMarine
#66CDAA
DimGray
#696969
SlateBlue
#6A5ACD
OliveDrab
#6B8E23
SlateGray
#708090
LightSlateGray
#778899
MediumSlateBlue
#7B68EE
LawnGreen
#7CFC00
Chartreuse
#7FFF00
Aquamarine
#7FFFD4
Maroon
#800000
Purple
#800080
Olive
#808000
Gray
#808080
SkyBlue
#87CEEB
LightSkyBlue
#87CEFA
BlueViolet
#8A2BE2
DarkRed
#8B0000
DarkMagenta
#8B008B
SaddleBrown
#8B4513
DarkSeaGreen
#8FBC8F
LightGreen
#90EE90
MediumPurple
#9370D8
DarkViolet
#9400D3
PaleGreen
#98FB98
DarkOrchid
#9932CC
YellowGreen
#9ACD32
Sienna
#A0522D
Brown
#A52A2A
DarkGray
#A9A9A9
LightBlue
#ADD8E6
GreenYellow
#ADFF2F
PaleTurquoise
#AFEEEE http://www.worldwidemyanmar.com
Web Design HTML and CSS
Page 22 of 197
DREAM IT, CODE IT BY PLANETCREATOR .NET
LightSteelBlue
#B0C4DE
PowderBlue
#B0E0E6
FireBrick
#B22222
DarkGoldenRod
#B8860B
MediumOrchid
#BA55D3
RosyBrown
#BC8F8F
DarkKhaki
#BDB76B
Silver
#C0C0C0
MediumVioletRed
#C71585
IndianRed
#CD5C5C
Peru
#CD853F
Chocolate
#D2691E
Tan
#D2B48C
LightGrey
#D3D3D3
PaleVioletRed
#D87093
Thistle
#D8BFD8
Orchid
#DA70D6
GoldenRod
#DAA520
Crimson
#DC143C
Gainsboro
#DCDCDC
Plum
#DDA0DD
BurlyWood
#DEB887
LightCyan
#E0FFFF
Lavender
#E6E6FA
DarkSalmon
#E9967A
Violet
#EE82EE
PaleGoldenRod
#EEE8AA
LightCoral
#F08080
Khaki
#F0E68C
AliceBlue
#F0F8FF
HoneyDew
#F0FFF0
Azure
#F0FFFF
SandyBrown
#F4A460
Wheat
#F5DEB3 http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
Beige
#F5F5DC
WhiteSmoke
#F5F5F5
MintCream
#F5FFFA
GhostWhite
#F8F8FF
Salmon
#FA8072
AntiqueWhite
#FAEBD7
Linen
#FAF0E6
LightGoldenRodYellow #FAFAD2
Page 23 of 197
OldLace
#FDF5E6
Red
#FF0000
Fuchsia
#FF00FF
Magenta
#FF00FF
DeepPink
#FF1493
OrangeRed
#FF4500
Tomato
#FF6347
HotPink
#FF69B4
Coral
#FF7F50
Darkorange
#FF8C00
LightSalmon
#FFA07A
Orange
#FFA500
LightPink
#FFB6C1
Pink
#FFC0CB
Gold
#FFD700
PeachPuff
#FFDAB9
NavajoWhite
#FFDEAD
Moccasin
#FFE4B5
Bisque
#FFE4C4
MistyRose
#FFE4E1
BlanchedAlmond
#FFEBCD
PapayaWhip
#FFEFD5
LavenderBlush
#FFF0F5
SeaShell
#FFF5EE
Cornsilk
#FFF8DC
LemonChiffon
#FFFACD http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
FloralWhite
#FFFAF0
Snow
#FFFAFA
Yellow
#FFFF00
LightYellow
#FFFFE0
Ivory
#FFFFF0
White
#FFFFFF
áá°ááŻááááŻá áĄááŻáľáˇáżááłááŻáľáąááźááąááŹáś Tag & Attribute
áá˝áá¸áˇááá¸áˇáášáá¸
<BODY BGCOLOR="#ff6600">
Page
áá˛á
Background
áĄáąááŹáá¸áá á¸ááŻááŻáľáˇááŻáááá¸áśááźáá¸áˇáżááá¸áˇ á <BODY TEXT="#ff6600">
Page
áá˛áá˝á
á áŹááŹáˇáášáŹáˇ
áĄáŹáˇááŻáľáˇá
áĄáąááŹáá¸ááŻáááá¸áśááźáá¸áˇáżááá¸áˇ á <BODY LINK="#ff6600">
Page áá á¸ááŻááľáŻáˇáá˝á Click ááááŻáá¸ááąááˇáąáᏠLink (ááźáŹáˇáąááŹáá¸áááá¸ááá¸ááąááˇáąááŹ
Link)
ááĄáąááŹáḠááá¸áśáżááá¸áˇá <BODY VLINK="#ff6600">
Page áá á¸ááŻááŻáľáˇáá˝á ááźáŹáˇáąááŹáá¸ááá¸ááá¸áżááŽáˇáąáᏠLink áášáŹáˇá áĄáąááŹáá¸ááŻáááá¸áśáżááá¸áˇá
<BODY ALINK="#ff6600">
áá°á Page áá á¸ááŻááŻáľáˇáá˝á Link áąááźááŻá Click ááŻááá¸ááŻááá¸áżááŽááŻáááŹáá˛á áĄá˛á Link áá˛á Text á ááá¸áá˝áá¸ááŹáˇáá˛á áĄáąááŹáá¸áąáżááŹáá¸áˇááźáŹáˇááŤáááá¸áśááá¸á
<FONT
COLOR="#cc6600">sample
text</FONT>
<BODY TEXT="#ff6600">
áá˛áááá°ááŤáá°áˇâŚ
ááŤá <font> element áá˛á Content áąááźááŻááᲠááá¸áá˝áá¸áąáżááŹáá¸áˇááá¸áˇááŹáżáá á¸ááŤááá¸á
<TABLE BGCOLOR="#ff6600">
Table
áá á¸ááŻááŻáľáˇáá˛á
Background
Colour
ááŻááąáżááŹáá¸áˇáá˛ááŹááŤá áá˝áá¸áášáḠ- <BODY BGCOLOR="#ff6600"> á Page áá˛á Background ááŻááąáżááŹáá¸áˇááŹáżáá á¸áżááŽáˇ áĄáᯠááŤááąááŹáś ááá¸áˇ Page áá˛áá˝áŹ Table áá˛á Background ááŻááąáżááŹáá¸áˇááŹáżáá á¸ááŤááá¸á <TH BGCOLOR="#ff6600">
Table
áá˛á
Cell
áášáŹáˇáá˛á
áąááŤáá¸áˇá áĽá¸áá˝á
background ááŻááĄáąááŹáá¸ááá¸áá˝áá¸ááŹá <TD BGCOLOR="#ff6600">
ááŤááąááŹáś
Cell
Background
áááŻ
áĄáąááŹáá¸ááá¸áá˝áá¸ááŹááŤá Background
Colour
ááá¸áá˝áá¸áá˛ááĄááŤáá˝áŹ
Background
Colour
á
áĄááá¸áżáá á¸áżááŽáˇ
áá°ááĄáąááá Font
áá˛á
forecolour
forecolour
á
áá˛áááźá˛áżááŽáˇážááá¸áśááá¸áśááŤááá¸á áĄááá¸ááŻáááá¸áąááŹáś
âŚ
ááŹáá˝áżááá¸ááá˝áŹáááŻáá¸áąááŹáśáá°áˇ âŚ
Page 24 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
ááŽáąááŹáá¸ááŻáááá¸áąááŹáś HTML áá˛á Colour áąááźáĄáąážááŹáá¸áˇááŻá ááąááŹáąááŤáá¸áąááŹáá¸áżááŽááá¸ááŤááá¸á áá˝áá¸áˇáąáĄáŹáá¸áąáżááŹáááá¸áąááŹáś HTML áá˛á Colour ááŻá Colour Name ááŻáááááŻáḠHex Code ááŻááżááŽáˇ áá˝á á¸áášáłááˇááŻáľáˇááŻáááááḠ..
ááŤáąááá˛á
áááášáá˛á
áĄáąááŹáá¸áá˛á
ááŹááŹá áŻáľ
ááŻáľáˇááŻááá¸ááŻáá
Hex
Code
ááŻáááŻáľáˇááŻáá
áĄážááľáżááłááŤááá¸á
Link
áĄáá¸ááŹááḠWeb page á áŹáášáá¸áá˝áŹáąááźááŻá áá á¸ááŻááŻáá˛ááá á¸áᯠáášááá¸ááá¸áĄááŻáľáˇáżááłááŹáˇááŹáżáá á¸ááḠ⌠Link ááŻáááŹááŹáżááá¸ááá¸áąááŹáś áĄáášááá¸áĄááá¸áąááŤá ⌠áĄááŻáá˝áźáá¸áąááŹá¸ááŻáááąáżááŹáá˛á Link á HTML áá˝áŹááŻáľáˇáá˛á Hypertext Link
áąááźáĄáąážááŹáá¸áˇááŤá html áá˝áááŻáá¸áá°áˇ áá á¸áżááŹáˇ language áąááźáá˛ááąááˇááá¸áˇ link
ááŻáááŹá áá˝áááŹáá˛á.. Link ááŻáááąáżááŹááḠLink áá˝áŹ áá˝á á¸áášáłááˇáá˝áááŤááá¸á 1. Absolute paths 2. Relative paths Link
Example
Absolute
Web
paths
áąááŹá¸áżááąááˇááŹáˇáżááá¸áˇáá˛áżáá á¸ááḠâŚ
URL
áá á¸ááŻááŻá
Domain
Address
áĄááŤáĄážáá¸
áááááášááš áá˝áźáá¸áąááŹá¸ááŻáááá˝áŹ
http://www.worldwidemyanmar.com/images/favicon.ico ááŻááá˛á URL áá˝áááá¸ááŻáááŤá áŻáá ... ááŤááŻá Code áá˝áŹáąááˇááŹáˇáąááŹáśááá¸ááŻáááḠ<a href=âhttp://worldwidemyanmar.com/images/favicon.icoâ> (ááŻáááááŻáá¸) <img src=âhttp://.worldwidemyanmar.com/images/favicon.icoâ>
ááŤá áá°ááŻáááá˛á ááá¸áˇáąážááŹáá¸áˇááŻá áĄáááĄáášááŻááá¸ááá¸áśáąááˇáááŹááŤáᲠ⌠Relative
File áá˛á áąáááŹáĄáąáááá˝áŹááááá¸áżááŽáˇáąááŹáś Relative path áá˝áŹ ááŻáľáˇáášáłááˇáá˝áááá¸.
paths
áż. áá°ááŽáá˛á Directory áá˛áá˝áŹááŻáááḠááá¸áˇáąážááŹáá¸áˇááŻááá¸ááá¸áśá ááŹáááŻááá˛ááĄááźáḠFile Name áá á¸ááŻáá˛ááŻááá¸ááá¸áśáąááˇáááḠ⌠<a href=âlink1.htmlâ>
á.
Source
File
á
Sub-Directory
áąáĄáŹáá¸áá˝áŹ
áá˝ááąáááá¸ááŻáááá¸
sub-
directory/filename ááŻáááá¸áśáąááˇáááá¸á
Page 25 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET <a href=âhtml/link1.htmlâ>
á.
Source
File
á
ááá¸áá˝á
Directory
áá˛á
áąáá˝á
folder
áá á¸ááŻááá¸áˇ
áąááŹáá¸áąáááá¸ááŻáááḠ../filename ááŻáááá¸áśáąááˇáááá¸á <a href=â../link1.htmlâ>
TAG
Tag
ááŻáááŹ
áá˝áźáá¸áąááŹá¸ááŻáááąááˇááŹáˇááŻááá¸áá˛á
á áŹááŹáˇáąááźááŻá
Code
áá˛á
Description
áąááźááŻá
ááźá˛áżááŹáˇááŻááá¸áąáĄáŹáá¸á Browser á ááá¸áˇááŻáá ááŹááŹáżááá¸áá˛ááĄá፠áááąáĄáŹáá¸ááŻáá áąááˇááŹáˇááŹáˇááŹáá˛á áĽáááŹCode
View
<b>This is BOLD</b>
This is BOLD
ááŤááŻáááḠWeb Browser áá˝áŹ áżááá¸ááá˝áŹá This is BOLD ááŻááżááŽáˇ á áŹááŻáľáˇáá°áá°ážááŽáˇáżááá¸áááŤáááá¸áśááá¸á ááŤáááá¸áˇ <b> ááŻááá˛á tag á This is BOLD ááŻáááŹááŻá Web Browser áá˝áŹ This is BOLD áąáááąáĄáŹáá¸ááŻáá ááá¸ááŽáˇáąááˇáá˛á code áąááŤá⌠áᎠtag áąááźááŻá Browser áá˝áŹáąááŹáś áżááá¸ááá˝áŹáááŻáá¸ááŤáá°áˇá Tag áąááźááŻááąááˇááŹáˇááŻáľáąááˇááąááŹáś áĄááźáá¸áśááŻáááḠ<âŚ> áá˛á áĄáááá¸ááŻáááḠ</âŚ> ááŻááżááŽáˇ slash (/) áąáᡠááá¸áśáąááˇáááŤááá¸á ááŤááŻá âOpen Tagâ and âClosing Tagâ ááŻáááąááááŤááá¸á ááŤááąááŹáś Less Than Sign (<) áá˝áá¸áś Greater Than Sign (>) áąááźáá˛á ááźá˛áá áá¸áˇááá¸áąááŹáá¸ááŹáˇááŹáżáá á¸ááá¸á
Comment
HTML
áá˝áŹ
source
code
áááŻáá¸áá˛
áąááˇááŹáˇááŹáˇáá˛á
code
áĄáąážááŹáá¸áˇááŻá
áĄáżááŹáˇáá°áąááź
áąááŹá¸ááá¸áˇáąááŹáḠáąááŹáá¸áá á¸áášááḠáá˝áźáá¸áąááŹá¸ááŻáá áżááá¸ááḠáżááá¸ááá¸áá˛ááĄáášááá¸áá˝áŹ ááźáá¸áá°áąáĄáŹáá¸ááŻáá áá˝áá¸áˇááá¸áˇáąááŹá¸áżááąááˇááŹáˇáá˛á áá˝áá¸áˇááá¸áˇáášáá¸áąááˇáąááźááŻá ááá¸áśáąááˇááá¸áśááŤááḠ.. áĄá˛áááŻááąááˇááŹáˇááŹááŻá comment áąááˇááŹáˇááá¸ááŻáááąááááŤááḠ..
Page 26 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
Code <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>World Wide Myanmar</title> <body> <!-- This text is Kyo So Par Tal in Burmese--> Welcome to World Wide Myanmar </body> </html> <!--your text --> ááŻááżááŽáˇáąááˇááŹáˇáąááˇáááŤááá¸á
Element
Web Page áá á¸ááŻááŻááąááˇááŹáˇááŹáˇáá˛ááąáááŹáá˝áŹ áĄááźáá¸áś Tag ááąá áĄáááḠTag (Opening Tag & Closing
Tag)
áá˛áááŹáąááźáĄáŹáˇááŻáľáˇááŻá
Element
ááŻáááąááááŤááá¸á
HTML
Document
áá á¸ááŻááŻáážáááśá¸ááá¸ááŻáááḠ.... HTML Document (Overview)
<html> <head> <title>This is title of HTML Document</title> </head> <body> <p>This is my first paragraph.</p> </body> </html>
<html> Elements
<html> <head> <title>This is title of HTML Document</title> </head> <body> <p>This is my first paragraph.</p> </body> </html>
Page 27 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<head> Elements
<head> <title>This is title of HTML Document</title> </head>
<body> Elements
<body> <p>This is my first paragraph.</p> </body>
<title> Elements
<title>This is title of HTML Document</title>
<p> Elements
<p>This is my first paragraph.</p>
ááŽáąááŹáá¸ááŻáááá¸áąááŹáś
HTML
áá˝áŹ
Element
ááŻáááŹ
ááá¸ááŹáˇá
ááá¸ááŹááŻááąááááá¸ááŻáááŹ
ááááźáŹáˇáąááŹáá¸áżáᎠááá¸ááŤááá¸á
Attribute
áá˝áźáá¸áąááŹá¸ááŻááááŻáľáˇáąááá˛á
HTML
tag
ááŻááá¸áˇáá˝áŹ
áá°ááŻáááá˛á
ááŻááá¸ááŻááá¸
attribute
áąááźáá˝áááŤááá¸á
áá á¸ááá¸áˇááŻáááąááŹá¸ attribute ááŻááᏠáá°ááŻáááá˛á ááá¸ááŻááá¸áᏠtag áąááźáá˛á á áźáá¸áˇáĄáŹáˇááŻáááŻááˇáżááá¸áśáąáĄáŹáá¸á ááŻááżááŽáˇ
ááźáá¸áá°áąáĄáŹáá¸
áĄááŻáľáˇáżááłááŹáˇááŹáá˛áżáá á¸ááá¸á
<p>
ááŻááá˛á
tag
ááŻáááá¸
áá°ááá˛á
ááŻáááŻááá¸áĄááá¸áĄáášáá¸áˇáąáááá˛á <p> tag attribute áá˝áááŤááá¸á áĽááᏠ= <tag attribute="value">Margarine</tag> Class Attribute HTML Code
<html> <head> <style type="text/css"> h1.intro {color:blue;} p.important {color:green;} </style> </head>
<body> <h1 class="intro">Header 1</h1> <p>A paragraph.</p> <p class="important">Note that this is an important
Page 28 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET paragraph. :)</p> </body>
</html> Result
áá˝áá¸áˇááá¸áˇáášáá¸
Class Attribute ááŻá CSS áá˝áŹááŻáľáˇááŹáášáŹáˇááŤááá¸á áᎠclass attribute á ID Attribute áá˛á áĄááŻáľáˇáżááłááŻáľáżááá¸áˇ ááá¸áá°ááŤááá¸á áĄáąááá code ááŻáážáááśá¸ááá¸ááŻáááḠh1.intro ááŻááá˛á css class selector áĄáżááŹáąááŹáá¸
blue
áĄá ááá¸áˇáąááŹáá¸
green
ááá¸áśááŹáˇááá¸á áżááŽáˇááḠááŻááŻááżááŽáˇáąááááŹáˇáááŻá
ááŻááżááŽáˇáąááˇááŹáˇáááŻá
p.important
ááŻááżááŽáˇáąááˇááŹáˇááŤááá¸á ááŤááŻá <h1> <p>
ááŻááá˛á
tag
áá˝áŹ
ááŻááá˛á
ááŻááżááŽáˇáąááŹáśááá¸áˇ CSS
<h1 tag
ááŻá
áá˛áá˝áŹááźáŹáˇáżááŽáˇ
class=âintroâ> áá˝áŹ
<p
class=âimportantâ>ááŻááżááŽáˇáąááááŻáľáˇááŹáˇáá˛ááĄááźáḠ<body> element áá˛á class áąááźá áĄáąááCSS code áá˝áŹ ááŻááá¸áˇáąá ááŹáˇáá˛ááĄááŻááá¸áˇáĄááŻáá¸ááŻáá¸ááŤááá¸á ID Attribute HTML Code
<html> <head> <script type="text/javascript"> function change_header() { document.getElementById("myHeader").innerHTML="Nice day!";
Page 29 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET } </script> </head> <body> <h1 id="myHeader">Hello World!</h1> <button onclick="change_header()">Change text</button> </body> </html>
Result
Hello World! Change text
âŚâŚâŚâŚâŚâŚâŚâŚâŚâŚChange
text
ááŻá
ááŻááá¸ááŻááá¸ááá¸
áąáĄáŹáá¸ááŤáĄááŻááá¸áˇáżááá¸áááŤáááá¸áśááḠâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚâŚ.
Nice day! Change text
áá˝áá¸áˇááá¸áˇáášáá¸
áąá áŹáąá áŹááąáżááŹáá˛ááááŻá ááŽ
ID attribute
á
áá˛ááá°ááá¸ááŻáááąáżááŹááŹáˇááŤááḠ⌠áĄááŻáááá¸áˇ java script
class attribute áá˛áááźá˛áżááŽáˇááŻáľáˇááŹáˇááŹ
áĽáááŹáĄáąááá˛á ááá¸áżááŽáˇáąááŹá¸áżááąááˇááŻááá¸ááŹááŤá ááááĽáŽáˇááŻáľáˇááąááŹáś Hello World! ááŻááżááŽáˇ button áá á¸ááŻáá˛ááąááŹá¸áżááąááˇááŹáˇááŤááá¸á button ááŻá click ááŻááá¸ááŻááá¸áá˛ááĄá፠áĄáąáááá˝áŹáąááˇááŹáˇáá˛á
javascript function
áąááźááŻááĄááŻáá¸ááŻáá¸áąá áżááŽáˇ id attribute áá˛á myHeader ááŻááá˛á value áá˛ááŻá Nice day! ááŻáááá¸áśááźáá¸áˇáąááˇááźáŹáˇááŹááŤá
Style Attribute HTML Code
<html> <body>
Page 30 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET <h1 style="color:blue;text-align:center">This is a header</h1> <p style="color:green">This is a paragraph.</p> </body> </html>
Result
This is a header This is a paragraph.
áá˝áá¸áˇááá¸áˇáášáá¸
Style attribute
ááąááŹáś
alignment
áąááźáąáżááŹáá¸áˇááá¸ááŻáááá¸áĄááŻáľáˇáášáŹáˇááŤááá¸á
<h1>
áąááźáąáżááŹáá¸áˇááḠ.. ááŻááá˛á
tag
colour
áá˝áŹ
<h1
style=âcolor:blue, text-align:centerâ> ááŻááżááŽáˇ ááá¸áˇ tag áá˛á á áŹááŹáˇááŻá style value áĄááŻááá¸áˇ ááŻáľáąááŹá¸áąá ááŤááá¸á
Title Attribute HTML Code
<html> <body> <p><abbr title="World Health Organization">WHO</abbr> was founded in 1948. This is tutorial coded by W3C.com</p> <p
title="Offcial
site
for
Your
One
Stop
IT
Station!">http://www.worldwidemyanmar.com</p>
</body> </html> Result
World Health Organization
WHO was founded in 1948. This is tutorial coded by W3C.com http://www.worldwidemyanmar.com Offcial site for Your One Stop IT Station!
áá˝áá¸áˇááá¸áˇáášáá¸
Title attribute
ááŹ
ááá¸áá˝áá¸ááŹáˇáá˛á áĄáąáááá˝áŹ
Page 31 of 197
tooltip text
ááŻááĄáááááŹáˇáżááŽáˇááŻáľáˇááŤááḠâŚ
mouse pointer
áąááˇáąááŹáá¸áá˝ ááá¸áˇáá˛á value
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET Information ááŻááąááŹá¸áżááąááˇáá˝áŹáżáá á¸ááŤááá¸á Abbr ááŻáááŹááąááŹáś abbreviations áá˛áżáá á¸ááŤááá¸á spellcheckers, screen readers,
translation
systems
and
search-engines
áąááźáĄááźáá¸
áĄááŻáľáˇážáá¸ááŤááá¸á
Building Web Page áĄáąáżáááľ Web Page áášáŹáˇááá¸áąááŹáá¸áá Source Code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Page TITLE</title> </head> <body> <p>This is Body by World Wide Myanmar</p> </body> </html>
Browser View
HTML File
HTML Editor HTML ááŻáá ááá¸áąááˇááŹáˇáąááŹáśááá¸ááŻáááḠáá˝áźáá¸áąááŹá¸ááŻáááĄááźáḠEditor áá á¸ááŻááŻáááŤááá¸á html file áąááźá text file áąááźáżáá á¸áá˛ááĄááźáḠááŻááˇááŻáᡠtext editor áąááźáá˛áááá¸áˇáąááˇááŹáˇááŻáááááŤááá¸á HTML Editor áąááźááąááŹáś
Page 32 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
Text editors Object editors WYSIWYG HTML editors WYSIWYM editors Online editors
Windows user áąááźáĄááźáḠNotepad ááŻáááŻáľáˇááŻááá¸áżááŽáˇ Mac áĄááźáá¸áąááŹáś BBedit ááŻáááŻáľáˇááŻááá¸ááŤááá¸á áĄáżááŹáˇ
WYSIWYM editor
áąááźáżáá á¸áá˛á
Dreamweaver áá˛á
Microsoft
Expression
Web
á ááá¸ááŻááááŻá
áĄááŻáľáˇáżááłááŻááá¸ááŤááá¸á ááŤáąááá˛á HTML ááŻáá ááḠáąááśááŹáá˛ááá°áąááźáĄááźáḠááá¸áˇááŻááááŻááááŻáľáˇááá¸áśááŤáá°áˇá áĄá˛áááŤáąááźááŻáááŻáľáˇááḠhtml áá˛á tag áąááźááŻá áá˝áá¸áááá˝áŹáááŻáá¸ááŤáá°áˇá WYSIWYM editor
áąááźá ááźáá¸áá°áżááŽáˇ áĄáášááłááĄááŻááá¸áˇáąááź Auto
ááá¸áśáąááˇááźáŹáˇááŹáąááźáá˝ááá˛ááĄááźáḠNotepad ááŻááá˛ááŻáľáˇááŻáá ááá¸áˇááźáá¸ááŤááá¸á HTML ááŻáááŹáˇááá¸ááąááŹáąááŤáá¸ááźáŹáˇáżááŽááŻááá˝ Dreamweaver ááŻáá Expression Web á ááá¸ááŻáááżááá¸áś Professional Web Page áąááźááŻáááá¸ááŽáˇážáááŤá
HTML Web Page áá á¸áᯠááá¸ááŽáˇáąááŹáśááá¸ááŻáááḠááááĽáŽáˇá áźáŹ Run Command (Windows Key + R) ááŻáááźáŹáˇá notepad ááŻááżááŽáˇááŻááá¸ááá¸áśááŻááá¸ááŤá ááŤááŻáááḠNotepad editor áá á¸ááŻáąááááŹááŤáááá¸áśááá¸á
Start > All Programs> Accessories> áá˛á Notepad ááŻáááá¸áˇááźáŹáˇáąááŹáá¸ááŻááá¸ááŤááá¸á HTML ááŻáá ááá¸áąááˇááŹáˇááŹáá˝áŹ ááá¸áˇáá˛á source code áąááźáá˝áŹ <html> áá˛áá áżááŽáˇ </html> áá˛áááŻáľáˇááŤááá¸.. ááŤá Root Element ááŻááᏠáĄáąáááá˝áŹááá¸áˇ áąááŹá¸áżááá˛ááżááŽáˇááŤáżááŽá áąááŹáá¸áá á¸ááá¸áśááá¸áᏠáá˝áźáá¸áąááŹá¸ááŻáááá˝áá¸ááŹáˇááá˝áŹá html document áąááźáá˝áŹ áĄááááĄáŹáˇáżááá¸áś Element áá˝á á¸ááŻáá˝áááá¸ááŻáááᲠáá˝áá¸ááŹáˇááŻááḠáĄá˛áááŤáąááźááąááŹáś <head> element ááḠ<body> element ááá¸ááŻáááŹááŤá Frameset Elements ááŻáááŹááá¸áˇáá˝ááąááá˛á áĄááŻáľáˇáá˛ááŤááḠ.. áąáĄáŹáá¸áąááŤáá¸áˇáá˝áŹ áąááŹá¸áżááąááˇááŹáˇááŤááá¸á áąááśááŹáąááá˛ááá°áąááźáĄáąááá˛á Element áá˝á á¸ááŻááŻááᲠáąááŤáá¸áˇáá˛áá˝áŹááá¸áśáżááŽáˇ html code
áąááźááŻá á ááá¸áąááˇážáááąáĄáŹáá¸âŚ.
(Notepad áĄáá˛áá˝áŹáąááŹá¸) áá˝áá¸áášáḠ= áĄááá¸áśáąááźááŻá áá á¸ááá¸áśáżááá¸áˇá áŽááźáŹáˇáᏠááŻááżááŽáˇáá˝áá¸ááááźáá¸ááŤááá¸á
Page 33 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<html> </html>
ááŤá html áá˛ááąááˇáá˛á html document ááŻááá¸áˇáá˝áŹááá¸áśáąááˇááá˛á code áá˛âŚ ááḠhtml page ááŻááá˛áąááˇáąáᡠááŤáąááˇááąááŹáś ááá¸áśáąááˇáááá¸.. ááŻáááŻáááŹá áá˝áźáá¸áąááŹá¸ááŻáá áąááˇááŹáˇáá˛á ááŽááŻááá¸áá˛á text áąááźá html language ááŻáááŻáľáˇááŹáˇáąážááŹáá¸áˇ áąááŹá¸áżááąááˇááŹáá˛âŚ <html> <head> </head> <body> </body> </html>
Element áá˝á á¸ááŻááŻááąááŤáá¸áˇáżááŽáˇáąááˇááŻááá¸ááá¸áąááŤá ⌠ááᯠ<head> element áá˛á <body> element áąááźááŻááá˛áá˛áąáᡠáá˝áá¸áˇááŤááá¸âŚ <head>
<head> element á Browser áá˝áŹ ááŻááá¸ááŻááá¸ááżááá¸ááŻááá¸ááŤáá°áˇ á áá°ááá˛á áĄááá ááŹážáá¸á Web Page áá˛á áąááŤáá¸áˇá áĽá¸áąááźáá˛á
Element
<body> element ááŻááĄáąááŹáá¸áĄáá°áżááłááŻáá áá°ááá˝áŹ java script áąááźááŤááŻááá¸ááá¸.. CSS code áąááźááŤááá¸âŚ áżááŽáˇááḠmeta
s
ááŻááá˛á site áá˛á author or site áá˛á information ááŻááąááŹá¸áżááąááˇáá˛á content áąááźááŤážáá¸ááá¸á ááŽáĄáá˛áá˝áŹ áąáĄáŹáá¸á፠tags áąááźááŤážáá¸ááá¸á
Tag
áá˝áá¸áˇááá¸áˇáášáḠáá˝ááśá¸ áĽáááŹ
<head>
Document á áŹáášáá¸áá˝áŹáá˛áááá¸ááá¸áá˛á áĄáąážááŹáá¸áˇáĄááŹáąááźááŻáááá¸áá˝áá¸ááá¸á <html> <head> <title>Title of the document</title> </head> <body> <p>The content of the document......</p> </body> </html>
<title>
Document áá˛ááąááŤáá¸áˇá áĽá¸ááŻá ááá¸áá˝áá¸á <head> <title>Title of the document</title> </head>
<base />
Page 34 of 197
ááá¸áá˝á Page ááźáá¸áá˝ááąáᏠLink áĄáŹáˇááŻáľáˇáá˛á Default Address ááá¸áá˝áá¸á
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET <head> <base href="http://www.worldwidemyanmar.com/images/" /> <base target="_blank" /> </head>
<link />
Document áá˛á áżááá¸áá CSS ááŻá áášááá¸ááá¸áĄááŻáľáˇáżááłááá¸áś link áášáŹáˇáĄááźáá¸á
<head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <meta />
HTML Document áá˛á ááá¸ááá¸áá˛á áĄáąážááŹáá¸áˇáĄááŹáášáŹáˇá <head> <meta name="description" content="Tutorial, Reviews and News on Tech Products" /> <meta name="keywords" content="HTML,CSS,XML,JavaScript" /> <meta name="author" content="Administrator" /> <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" /> </head>
<script>
client-side script áášáŹáˇááá¸áśááźáá¸áˇá <head> <script type="text/javascript"> function change_header() { document.getElementById("myHeader").innerHTML="Nice day!"; } </script> </head>
<style>
Document áá˛á style áąááźááŻáááá¸áá˝áḠá <head> <style type="text/css">
Page 35 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET h1 {color:red} p {color:blue} </style> </head>
<body>
áᎠelement áá˛áá˝áŹ á áŹáąááźá ááŻáľáąááźá ááŽááŽááŻááąááź á ááá¸áżááá¸áś Web Browser áá˝áŹáżááá¸ááŻááá¸ááŤááá¸á áá˝áźáá¸áąááŹá¸ááŻáááąááŹá¸áżááášáá¸áá˛á
Element
áĄáąážááŹáá¸áˇáĄááŹáá á¸ááŻááŻá áᎠelement áĄááźáá¸áˇáá˝áŹáĄáááááŹáˇáąááˇáąááˇáááŤááá¸á Forms Tables Text Anchors Style Sheets Line Breaking Lists Multimedia Block Formatting Character Formatting Embedded Functionality Revision Control Rubies ááŤáąááźááąááŹáś <body> element áá˛áá˝áŹááá¸áśááźáá¸áˇáĄááŻáľáˇáżááłážááá˛á content áąááźááŤá áĽááᏠLists ááŻáááḠáá°ááá˝áŹ Ordered List (<ol>), Unordered List (<ul>) á ááá¸ááŻááááŤážáá¸ááŹáąáááŤá áĄáąááˇá ááá¸ááŻáážáááśá¸ááąáĄáŹáá¸á
Form áá˝áŹááŻáááḠForm tags áąááźáĄáżááḠInput Type áąááźááá¸áˇááŤážáá¸ááŤááá¸á ááŤáąážááŹáá¸áś form áá˝áŹááŻáľáˇáá˛á tags áąááźáĄáżááḠInputType= áąááźááá¸áˇáąááŹá¸áżááąááˇááźáŹáˇáá˝áŹááŤá
Forms Tag
áá˝áá¸áˇááá¸áˇáášáḠáá˝ááśá¸ áĽáááŹ
<form>
Form áá˛áá˝áŹ web page user áąááźáá˛á Input Information áąááźááŻá áĄááŻáľáˇáżááłááźáá¸áśáąááˇáżááŽáˇ ááá¸áˇ form
áĄááźáá¸áˇáá˝á
content
áášáŹáˇááŻá
ááá¸ááŻá
process
ááŻáá¸ááá¸ááŻáááŹáá
ááŻáá¸áąááŹáá¸áąááˇáá˛ááąáááŹááá¸áˇáżáá á¸ááá¸á áĄáá˛áá˝áŹáąááŹáś Input text box
áąááź button
áąááźááŤážáá¸ááá¸.. form á table áá˛á ááá¸áá°ááŤááá¸á ááŻáá¸áąááŹáá¸ááŻáľááąááŹáś ááźá˛áżááŹáˇááŤááá¸á <form method="get" action="http://www.worldwidemyanmar.com/query" enctype="application/x-www-form-urlencoded">
Page 36 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET <input type="password" name="brb" />
</form> <button>
Button tag ááąááŹáś INPUT element áá˝áá á¸ááá¸áś submit ááŻáá¸ááá¸, reset ááŻáá¸ááá¸âŚ ááŻáááŻáááŹá áᎠsubmit button ááŻáááŻááá¸ááŻááá¸ááḠform áĄáá˛áá˝áŹáá˝ááá˛á data áąááźááŻá ááŻááááŤá áášáá¸ááŤá áżááá¸á፠á ááá¸áĄáżááá¸áś áĄááŻáá¸ááŻáá¸ááŤááá¸á <button type="submit" name="helpbutton" tabindex="1"> <img src="helpicon.gif" align="middle" /> Get the <strong>HELP</strong> that you need here... </button>
<label>
Label ááŻáááŹááąááŹáś check box , option button áąááˇáąááźááŻááąáááŹáášáłááˇáąááˇáąááźáá˝áŹ áĄááźáá¸áˇá áŹááŹáˇáąáᡠáąááˇáąááˇáá˛áááŻáľá áľááŤáá˛á
Label
<fieldset> <legend accesskey="G" tabindex="1">Gender</legend> <label accesskey="M"><input type="radio" name="Gender" value="Male" />Male</label> <br /> <label accesskey="F"><input type="radio" name="Gender" value="Female" />Female</label> </fieldset> <option>
Option
tag
ááąááŹáś
box
áá˛áá˝áŹ
áąááźáˇáášáá¸ááźáá¸áśáąááźáąááˇááŹáˇááḠ..
áĄá˛ááĄáá˛ááá˝
áááááá˝á á¸ááá¸ááŹááŻá áąááźáˇáášáá¸áĄááŻáľáˇáżááłáąá áášáá¸ááá¸ááŻáááḠoption tag ááŻááĄááŻáľáˇáżááłáááŤááá¸á
Page 37 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<form> <select name="list1" size="3" multiple> <option value="opt1">option1 </option> <option value="opt2">option2 </option> <option selected value="opt3">option3 </option> </select> </form> <fieldset>
áá°ááąááŹáś áĄáąáááá˝áŹáąááŹá¸áżááá˛ááá°áˇáá˛á label áá˛áá˝áŹááŤááŤááá¸á form áá˛á áášáłááˇáá°ááŹáąááź Group ááźá˛áááŻááá¸áá˛áááŻáľá áľáąááŤá .. áąáĄáŹáá¸áááŻáľááŻáážáááśá¸ááá¸ááŻáááḠMale & Female áąááźá Gender ááŻááá˛á Group áá á¸ááŻááá¸áˇááźá˛áááŹáˇáááŻáááŻáľá áľáąááŤáá
<fieldset> <legend accesskey="G" tabindex="1">Gender</legend> <label accesskey="M"><input type="radio" name="Gender" value="Male" />Male</label> <br /> <label accesskey="F"><input type="radio" name="Gender" value="Female" />Female</label> </fieldset> <legend>
Page 38 of 197
Fieldset , label ááŻáááąááźáá˛ááąááŤáá¸áˇááŹáˇáá˛á ááŻáľáá˝áŹ fieldset ááŻááá˛á group áá˛á áąááŤáá¸áˇá áĽá¸ááŻá
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
ááá¸ááá¸ááŻáááḠlegend ááŻáááá¸áśáąááˇáááŤááá¸á áá°ááá¸áˇ áĄááźáá¸áˇááŤáá˛á
<fieldset> <legend accesskey="G" tabindex="1">Gender</legend> <label accesskey="M"><input type="radio" name="Gender" value="Male" />Male</label> <br /> <label accesskey="F"><input type="radio" name="Gender" value="Female" />Female</label> </fieldset> <select>
Select ááąááŹáś content áá˛á value áąááźáĄáŹáˇááŻáľáˇááŻá List áá á¸ááŻáĄáąááá˛áááŻáá¸ááŤááḠ⌠áá°ááĄáá˛áá˝áŹááá¸áˇ multiple ááŻáááḠselect ááŻáá¸áᏠáá á¸ááŻááá¸ááŻááżááŽáˇááŻáá¸ááŻááá¸ááŤááá¸á single ááŻáááá¸áąááŹáś select ááŻáá¸áᏠáá á¸ááŻáá˛áááŤááááśá¸ááá¸á
<form> <select name="list1" size="3" multiple> <option value="opt1">option1 </option> <option value="opt2">option2 </option> <option selected value="opt3">option3 </option>
Page 39 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET </select>
</form> <optgroup>
selection list áá˛á value áąááźááŻá group ááŻáá¸ááŹáá˛áżáá á¸ááá¸á
<form> <select name="list1" size="3" multiple> <option value="opt1">option1 </option> <option value="opt2">option2 </option> <option selected value="opt3">option3 </option> </select> </form> <textarea>
Textarea
element
ááŹ
multiple text
áąááźááŻááá¸ááá¸áśááŻáááĄááźáá¸
ááá¸áąááŹáá¸
áąááˇááŹáˇáá˛á ááźáá¸ááá¸ážááŽáˇáá á¸ááŻáá˛áżáá á¸ááŤááá¸á
<form> <textarea name="brb" rows="3" cols="40"> Default TEXTAREA value goes here </textarea> </form>
Page 40 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
Form tags áąááźáżááŽáˇáąááŹáś áĄáᯠááá¸ááá¸áżááŽáˇ áĄá˛ááá˝áŹááŻáľáˇáá˛á InputType= áąááźááŻáá፠ááá¸áśááźáá¸áˇáąááŹá¸áżááá˝áŹáżáá á¸ááŤááá¸á InputType=
áá˝áá¸áˇááá¸áˇáášáḠáá˝ááśá¸ áĽáááŹ
button
Form áąáááá˝áŹ button áąááˇáá á¸ááŻáąáááášáá¸ááá¸ááŻáááḠtype=âbuttonâ ááŻáááŹáąááˇáá˛á áąááˇááŹáˇááŹáˇááŹáżáá á¸ááá¸á
Feedback form áá á¸ááŻáá˝á Button áášáŹáˇááŻááżáááŻáľ Submit Button, Reset Button
<form> <input type="button" value="Submit" name="brb" onClick="test1(this.form)" /> <input type="reset" value="Reset" /> </form> radio
Radio ááŻá áá á¸áášáłááá Option button ááŻááááá¸áˇáąááážáááḠ.. áá°á áĄáášáŹáˇážááŽáˇáá˛á áá á¸ááŻááŻá áąááźáˇáášáá¸ááŻááá¸áˇááŹáˇááŹááŤá
<form> <input type="radio" value="Jazz" name="Radio1" /> Jazz<br /> <input type="radio" value="New Age" name="Radio1" />
New
Age<br /> <input
Page 41 of 197
type="radio"
value="Rock"
name="Radio1"
checked
/>
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
Rock!<br /> </form> reset
áąáĄáŹáá¸ááŤááŻáľááŻáážááá¸áśááŤá
ááŻáľáá˝áá¸
feedback
form
áá á¸ááŻáá˝áááá¸ááŻáááŤá áŻáá âŚ
áĄá˛ááĄáá˛áá˝áŹ
ááŻááá¸ááŻááá¸áá˛á á áŹááŹáˇáąááźáĄáŹáˇááŻáľáˇááŻá áááŻá áĄááŻááá¸áˇ (Empty) ááŻáá¸ááŻáá¸áá¸áášáá¸ááá¸ááŻáááḠReset button
áąááˇááŻáááŹáˇááŻááá¸ááŻáááááŤááá¸á
Reset
ááŻáá¸ááŻááá¸áżááŽááŻáááŹáá˛á
áĄááá¸áśáá á¸ááá¸áśáášáá¸áˇá ᎠááŻááá¸áżááŽáˇ áášáá¸á ááŹáááŻááᲠáĄáŹáˇááŻáľáˇááŻá áá˝áá¸áˇáąááˇááźáŹáˇááŤááááśá¸ááá¸á ááŤá Form ááŻááá˝áá¸áˇááŻááá¸ááŹááŤáá˛á
Reset Button
<form> <input type="reset" value="clear the form" /> </form> CheckBox
Boolean Choice áąáááá˛á true or false ááŤáá˛á áá˝áá¸ááḠáá˝áá¸ááá¸.. áá˝áŹáˇááá¸áá˝áŹáˇááḠ.. ááŽáá˝á á¸ááŻááá¸áˇááá˝ áĄáá˝áá¸áżáá á¸áżááŽáˇáąááźáˇáášáá¸áąááˇáááŤáááá¸áśááḠ⌠Checkbox áᏠáá á¸ááŻááŻáááááŻáḠáá á¸ááŻááá¸ááŻááżááŽáˇ áĄáá˝áá¸áżáá á¸ááŻááá¸áááŻáá áá á¸ááŻáá˝ áĄáá˝áá¸ááżáá á¸ááá¸áˇáááŤááá¸á Radio button áá˛ááąááŹáś
áá˛áá˛ááźá˛ááŤááá¸á
Radio
Button
á
áĄáá˛ááŻáľáˇáá˛á
áĄáášáŹáˇááŻáľáˇáá á¸ááŻáąááŹáś
áąááźáˇáąááˇáááŤááá¸á
Page 42 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<form> <input type="checkbox" value="3" name="brb" checked /> <input type="checkbox" value="3" name="brb" /> <input type="checkbox" value="3" name="brb" checked /> </form> image
áąá áŹáąá áŹá
áá˝áźáá¸áąááŹá¸ááŻáá
button
áąááźááŻáľáˇáááŻááᲠ..
áĄááŻ
áĄá˛ááĄá áŹáˇ
image
ááŻáááá¸áśááźáá¸áˇáĄááŻáľáˇáżááłááŹáˇááŹáżáá á¸ááŤááá¸á
<form> <input
type="image"
src="http://www.planetcreator.net/images/pnc.png" name="imagesubmit1" align="top" height="50" width="50" /> </form> range
Text box áá˛áá˝áŹáá˝ááá˛á number áąááźááŻááĄááŻáľáˇáżááłááḠ.. áĄá˛áááŻááĄááŻáľáˇáżááłáá˛ááĄá፠áá°ááŻááááŻá Number
ááá¸áąááŹáá¸ááąá
á á á¸ááŻáá¸áášáá¸ááá¸ááŻáááá¸
ááŽááŻááąáááŹáá˝áŹ
ááá¸áąááŹáá¸áĄáááá˛ááŻáľáˇááḠrange
ááŻááżááŽáˇááŻáľáˇážáááá¸á
ááŻáááŹáášáłáᡠMinium
ááá¸áąááŹáá¸ááŹáˇááḠ.. Maxium ááá¸áąááŹáá¸áĄáááá˛ááŻáľáˇááá¸ááŻáááŹáášáłááˇáąááŤá ..
Page 43 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
áąááŹáá¸áá á¸áášáłááˇááąááŹáś
<form> <input name="r" type="range" min="1" max="11" value="9"> <input type="submit" value="Go"> </form> submit
Submit
ááŻáááŹ
áĄáąááá
button
áá˝áŹááá¸áˇ
ááŤáżááŽáˇááźáŹáˇááŤáżááŽâŚ
ááŤáąááá˛á
ááá°ááŹáá á¸ááŻááąááŹáś áá°á type=âbuttonâ
<form> <input type="submit" value="Submit" /> </form> file
áąááŹáá¸áá á¸ááŻááąááŹáś
file
ááŻáááŹááŤáá˛âŚ Web server
áąááááŻáá
ááŻáľáąááźááá¸ááḠ..
ááŻááá¸áąááźááá¸ááá¸ááŻáááḠbutton áąááˇáá á¸ááŻáá˛á upload ááŻáá¸áááŹáąááź áąááźááá°áˇáá˝áŹááŤâŚ
Page 44 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<form method="post" action="action.cgi" enctype="multipart/form-data"> <input type="file" name="filename" /> </form> password
ááŤááąááŹáś password ááŻáááąááááŤááḠ.. áᎠtext box áá˛áá˝áŹ ááŻááá¸ááá¸áśááá˝ášáĄáŹáˇááŻáľáˇá password box áżáá á¸áá˛ááĄááźáḠáąáĄáŹáá¸ááŤáĄááŻááá¸áˇáżááá¸ááá˝áŹááŤáᲠâŚ
<form> <input type="password" name="thepassword" /> </form> readonly
ááŽáá˛áá˝áŹ
ááŻááá¸ááá¸áśááŹáˇáá˛á
ááá¸ááŻááˇá
ážáááśá¸ááŻáľááŤáá˛âŚ user
áąááźáá˛á
áżááá¸ááá¸áżááá¸ááá¸
ááźáá¸áśááá˝áááŤáá°áˇá áá°á text áá˛áááá¸áá°ááŤááḠ..
Page 45 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<form> <input type="readonly" name="ron" value="Readonly Value" /> </form> text
Text á readonly ááŻáááŤáá˛.. ááŤáąááá˛á text á ááááá ááá¸ážáááłáá¸ááŻááá¸ááźáá¸áˇ áżááá¸ááá¸ááźáá¸áśáá˝áááŤááá¸á ááŻáááĄáżááḠááŻááá¸ááźáá¸áˇáá˛á value ááá¸ááŻááˇááŻáááá¸áˇ ááá¸áááá¸ááŻáááááŤááá¸á
<form> <input
type="text"
value="brb
was
here"
name="text1"
size="10" maxlength="25" /> </form> ááŤáąááźááąááŹáś form elements áá˛áá˝áŹááŻáľáˇááŹáąááźááŤáá˛âŚ
Table Element áá˝áŹááŤážáá¸áá˛á áá°ááŻáááá˛á tag áąááźáĄáąážááŹáá¸áˇááŻá áá˝áá¸áˇáżááąááˇááźáŹáˇáá˝áŹáżáá á¸ááŤááá¸á HTML ááŻááąááśááŹáżááŽááŻáááḠáᎠtable áąááźáááá¸áˇ áĄáąááˇážááŽáˇááŤááḠâŚ
áĄááŻááá¸ááá¸áżááŽáˇ áá˝áźáá¸áąááŹá¸ááŻáá Tables áĄáąážááŹáá¸áˇááŻá áąáżááŹááźáŹáˇáá˝áŹáżáá á¸ááŤááá¸á Table Tags
áá˝áá¸áˇááá¸áˇáášáḠáá˝ááśá¸ áĽáááŹ
<table>
<table> tag á HTML table element áá˝áŹ áááá¸ááŻáľáˇáááŤážáá¸áá˛ááĄááŻááá¸áˇáżáá á¸ááŤááá¸á table ááŻááááŻááá˛ááĄááŻááá¸áˇ áááŹáˇááźáá¸áąááˇáąááźáá˛ááášáąááˇááźáŹáˇáá˝áŹáżáá á¸ááŤááá¸á áááá¸áˇáĄáŹáˇáżááá¸áś Table ááŻááᏠcell ááźáá¸áąááˇáąááźááŤážáá¸áá˛á áááŹáˇážááŽáˇáąááŤáá Default value áĄáąááá˛á table áá˝áŹ border
Page 46 of 197
áááŤááŤáá°áˇá
table
áąááźáá˛á
attribute
áąááźáĄáŹáˇááŻáľáˇá
table cell
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
áąááˇáąááźáĄáŹáˇááŻáľáˇááŻá effect áżáá á¸ááŤááá¸á
<table
border="2"
align="left"
cellpadding="5"
bordercolor="#ff0000"
width="75%"> <caption
align="top">Juggling
Capabilities
of
Waterfront
Performers</caption> <tr> <td>brb</td> <td>5</td> <td>2</td> <td>5</td> </tr> <tr> <td>bob</td> <td>2</td> <td>7!!!</td> <td>NA</td> </tr> <tr> <td>neo</td> <td>2</td> <td>7!!!</td> <td>NA</td> </tr> <tr> <td>U Tin Maung</td> <td>1</td> <td>2</td> <td>20<br>he is great!)</td> </tr> </table>
Table áá˝áŹ áá°ááá˛á ááŻááá¸ááŻááḠAttribute áĄáášáłááááá¸áˇáá˝áááŤááá¸á áĄááŻáľáˇážáá¸áá˛á attribute áĄáášáłááááŻááąááŹá¸áżáááŻááá¸ááŤááá¸á Attribute
áá˝áá¸áˇááá¸áˇáášáá¸
<table border=?>
Table cell
Values=Integers
á ááá¸ááŻááááŻá ááá¸áá˝áá¸ááŻááá˝ášáá¸ááŻáľáˇá
áąááźáá˛á
áąááˇáąááŹáá¸áąááźáá˛á
áĄáá°
áĄááŤáˇ
<table border="2">
ááŻááżááŽáˇ value ááŻáááŻááá¸ááá¸áśáąááˇáááŤááá¸á <table align=?>
Table áá˛áá˝áŹáá˝ááá˛á Cell áąááźáá˛á Center, Left, Right ááŻááá˛á
Values=center,left,right alignment áąááźááŻáááá¸áá˝áá¸ááá¸á <table border="centerâ>
ááŻááżááŽáˇ value ááŻáááŻááá¸ááá¸áśáąááˇáááŤááá¸á <table background=?> Table áá˛á background image ááŻáľáąááźááá¸áśááá¸ááŻáááḠááŻáľáˇá (images)
Page 47 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<table background="flower.gif"
<table cellpadding=?> Cell áá á¸ááŻáášáá¸áˇá áŽáá˛á áąááŹáá¸áąááźáá˛á cell ááźáá¸áĄááźáá¸áˇáá˝á data
Values=Integers
áąááźáá˛á áĄááźáŹáĄáąážáˇááŻá ááá¸áá˝áá¸ááŻáááĄááźáá¸ááŻáľáˇ á
<table cellpadding="value">
<table width="224" border="1" cellpadding="20" cellspacing="10" bordercolor="#0000FF">
<table cellspacing=?>
Cell áášáŹáˇáĄážááŹáˇ áĄááźáŹáĄáąážáˇááŻáááŻáľáˇááá¸á áąáĄáŹáá¸á፠ááŻáľááźáá¸
Values=Integers
áĄááŽáąááŹáḠáĄáá˝áá¸áĄááŹáˇáżááá¸áśáąááŹá¸áżáááŹáˇááá¸á
<table cellspacing="value">
Page 48 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<table width="224" border="1" cellpadding="20" cellspacing="10" bordercolor="#0000FF">
<table bgcolor=?>
Table ááąááŹáá¸ááľ Background áĄáąááŹáá¸ááŻáááá¸áśáżááá¸áˇá
Color Name or Hex
<table bgcolor=âredâ>
Color
Or <table bgcolor=â#FF0000â>
<table bordercolor=?> Table ááąááˇáąááŹáḠáĄáąááŹáá¸áĄááźáá¸á Color Name or Hex
<table bordercolor=âredâ>
Color
Or <table bordercolor=â#FF0000â>
<table
3D
Border
áášáłááˇááŻáá¸áášáá¸ááá¸ááŻáááá¸
Bordercolordark
bordercolordark=?>
ááąááŹáś table border áá˛á áąáĄáŹáá¸áĄáąááŹáá¸áąááŤá.
Bordercolordark <table cellpadding="5" cellspacing="5" width="100%" border="5" bordercolordark="blue" bordercolorlight="#FF0000">
Border ááŻá size áášáŹáˇáášáŹáˇáąááˇáżááŽáˇ ážááá¸áśááŻááá¸ááá¸á
Page 49 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<table
áá°á áĄáąáááĄáąááŹáá¸ááŤâŚ áĄáąááŹáá¸áąáášáŹáśá¸ááá¸..
bordercolorlight=?>
Bordercolorlight
<table cellpadding="5" cellspacing="5" width="100%" border="5" bordercolordark="blue" bordercolorlight="#FF0000">
Border ááŻá size áášáŹáˇáášáŹáˇáąááˇáżááŽáˇ ážááá¸áśááŻááá¸ááá¸á <table width=?>
Table ááĄáášáŹáˇááŻááḠáĄáášáá¸ááŻáááá¸áá˝áá¸ááá¸á
Values=Integers
Tableâs Width
<table width="100%" height="200">
integer pixel values or a percentage ááŻáááá¸áá˝áá¸ááŻááḠ<table height=?>
Table ááĄááľááŻááḠáĄáżáááśá¸ááŻáááá¸áá˝áá¸ááá¸á
Values=Integers
Tableâs Height
<table width="100%" height="200">
integer pixel values or a percentage ááŻáááá¸áá˝áá¸ááŻááḠ<table cols=?>
COLS ááŻá <col> tag áá˛á ááąááŹááŤáá˛á.. COLS á table áá˛á attribute áżáá á¸áżááŽáˇ browser áĄáŹáˇáááááá˛á table áá˛áá˝áŹ columns ááá¸áá˝á á¸ááŻáá˝ááąážááŹáá¸áˇáąáżááŹááŹáˇááŹáżáá á¸ááŤááá¸á
Page 50 of 197
áá á¸áášáłáá
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET website ááá¸ááŽáˇáá˛ááá°áąááźá table áąááźááŻá browser á áżááá¸áżááá¸ááá¸ááá¸
ááŻáľáąááŹá¸áąááˇááŻááá¸ááŻáá
ááá¸áśááźáá¸áˇáĄááŻáľáˇáżááłážáááŹ
ááá¸áˇáąááźááááŤááḠá <TABLE WIDTH="600" COLS="4" BORDER="1" >
ááŤááŻáááḠtable áá˛áá˝áŹ Columns á ááŻáá˝áááá¸áąááŤáá <table colspan=?> LEFT ááŻááá˛á cell ááźáá¸á columns
COLSPAN
ááąááŹáś
table
áá˛á
attribute
áżáá á¸ááŻáľáá
<th>áá˛á<td> ááŻáááĄááźáá¸ááá¸áˇáżáá á¸ááŤááá¸á
áá˝á á¸áᯠáá°ááŹáˇááŹááŻá áąááźááááŤááááśá¸ááá¸âŚ <TR>
ááŤááŻáááá¸áąááŹáś
<TH COLSPAN="2">LEFT</TH>
colspan=â4â áąááŤáâŚ
<TH COLSPAN="2">RIGHT</TH> </TR>
COLSPAN
ááŻááĄáášáłááá
Cell
áášáŹáˇáĄáŹáˇ
Merge
ááŻáá¸ááá¸ááŻááááá¸áˇáąáżááŹážáááŤááá¸á <caption>
Table áá á¸ááŻáĄáŹáˇ áąááŤáá¸áˇá áĽá¸áąááˇááá¸ááŻáááḠ<caption> ááŻááá˛á tag ááŻá table element áĄááźáá¸áˇáá˝áŹáąááˇáááŤááḠ⌠áąáĄáŹáá¸á፠source code ááŻáážááá¸áśážááá¸áśááŤá
<caption> ááŻááá˛á tag ááŻáááŻáľáˇáżááŽáˇ table áĄáŹáˇáąááŤáá¸áˇá áĽá¸ááá¸ááŹáˇ ááŹááŤ
<table border="2" align="left" cellpadding="5" bordercolor="#ff0000" width="75%"> <caption align="top">Juggling Capabilities of Waterfront
Page 51 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
Performers</caption> <tr> <td>brb</td> <td>5</td> <td>2</td> <td>5</td> </tr> <tr> <td>bob</td> <td>2</td> <td>7!!!</td> <td>NA</td> </tr> <tr> <td>neo</td> <td>2</td> <td>7!!!</td> <td>NA</td> </tr> <tr> <td>U Maung Tin</td> <td>1</td> <td>2</td> <td>20<br> he is great!)</td> </tr> </table> <thead>
áĄáᯠ<thead> áá˛á <tfoot> tags áąááźááŻá áá á¸áąááŤáá¸áˇááá¸áˇáąááˇáżááŽáˇ áąááŹá¸áżááąááˇááźáŹáˇááŤááḠ..
<tfoot>
table
áá á¸ááŻáá˝áŹ
áąáĄáŹáá¸ááŤ
áąááˇáąááźáá˝áááŻááá¸ááŤááá¸á
ááŻáľá áľáášáłááˇ
ááŽááŻááĄááŤáášáłááˇáá˝áŹ
áąááŤáá¸áˇá áĽá¸ážááŽáˇáĄáżááḠáĄááá¸ááŤ
tags
áá°ááŻáááá˝áŹ
áąááŤáá¸áˇá áĽá¸ááźá˛
áąááźááŻááá¸ááá¸áśáááŻá
ááŻáľáˇážáááŤááá¸á áá°ááŻáááá˛á áĄááá ááŻáá¸áąááŹáá¸ááŹááąááŹáś <tr> tag áąáááá˛á table row áąááźááŻá group ááźá˛áááŻááá¸ááŹááŤáá˛á áżááŽáˇáąááŹáś ááŽáá˝á á¸ááŻá áĄááŻáľáˇááá¸áˇááŤááá¸á
<table border="2" align="left" cellpadding="5" bordercolor="#ff0000" cols="4" frame="vsides" rules="rows" width="75%"> <caption align="top">Juggling Capabilities of Waterfront Performers</caption> <thead> <tr> <th>Juggler</th> <th>Pins</th> <th>Bowling Balls</th> <th>Flaming Baseballs</th> </tr> </thead> <tfoot> <tr> <th colspan="4">NOTE: This is only a small sample</th> </tr>
Page 52 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
</tfoot> <tbody> <tr> <td>brb</td> <td>5</td> <td>2</td> <td>5</td> </tr> <tr> <td>bob</td> <td>2</td> <td>7!!!</td> <td>NA</td> </tr> <tr> <td>neo</td> <td>2</td> <td>7!!!</td> <td>NA</td> </tr> <tr> <td>U Maung Tin</td> <td>1</td> <td>2</td> <td>20<br>( he is great!)</td> </tr> </tbody> </table> <col>
<colgroup> ááŻááá˛á element áá˛áá˝áŹ <col> ááŻááá˛á tag áąááźááŤážáá¸áżááŽáˇ Table áá˛áá˝áŹ áá˝ááá˛á
<colgroup>
Column áąááźááŻá Group ááźá˛áááŹáżáá á¸ááŤááá¸á <col> ááąááŹáś Group ááźá˛áááŹáˇáá˛á Column áá á¸ááŻáášáá¸áˇá áŽááŻá right,left,center á ááá¸áżááá¸áś ááá¸áá˝áá¸ááŹáżáá á¸ááŤááá¸á
<table border="2" align="left" cellpadding="5" bordercolor="#ff0000" cols="4" frame="vsides" rules="cols" width="75%"> <colgroup> <col align="right" /> </colgroup> <colgroup> <col align="center" /> <col align="center" /> Page 53 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<col align="center" /> <col align="center" /> </colgroup> <caption align="top">Juggling Capabilities of Waterfront Performers</caption> <thead> <tr> <th>Juggler</th> <th>Pins</th> <th>Bowling Balls</th> <th>Flaming Baseballs</th> </tr> </thead> <tbody> <tr> <td>brb</td> <td>5</td> <td>2</td> <td>5</td> </tr> <tr> <td>bob</td> <td>2</td> <td>7!!!</td> <td>NA</td> </tr> <tr> <td>neo</td> <td>2</td> <td>7!!!</td> <td>NA</td> </tr> <tr> <td>U Maung Tin</td> <td>1</td> <td>2</td> <td>20<br>he is great!)</td> </tr> </tbody> </table> <tr>
<tr> ááŻááᏠtable áĄááźáá¸áˇáá˝áŹ row áąááźááá¸áąááŹáá¸áááŻááĄááźáá¸áżáá á¸áżááŽáˇ <th> tag
<th>
ááąááŹáś table áá˛á áąááŤáá¸áˇá áĽá¸ááŻá áąááŹá¸áżáááŻááá˛ááĄááŤáá˝áŹ áĄááŻáľáˇáżááŽáˇáżááŽáˇ <td>ááąááŹáś table áá˛á
<td>
cell áąááźáá˝áŹ áĄáášáá¸áĄááḠdata áąááźááŻá áĄááŻáľáˇáżááł áąááŹá¸áżáááá¸áżáá á¸ááŤááá¸á
Page 54 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<table border="2" align="left" cellpadding="5" bordercolor="#ff0000" width="75%"> <caption align="top">Juggling Capabilities of Waterfront Performers</caption> <tr> <th>Juggler</th> <th>Pins</th> <th>Bowling Balls</th> <th>Flaming Baseballs</th> </tr> <tr> <td>brb</td> <td>5</td> <td>2</td> <td>5</td> </tr> <tr> <td>bob</td> <td>2</td> <td>7!!!</td> <td>NA</td> </tr> <tr> <td>neo</td> <td>2</td> <td>7!!!</td> <td>NA</td> </tr> <tr> <td>U Maung Tin</td> <td>1</td> <td>2</td> <td>20<br>(he is great!)</td> </tr> </table>
Text áášáŹáˇááá¸áśááźáá¸áˇáąááˇááŹáˇáżááá¸áˇ áá˝áá¸áś ááá¸áąááŹáá¸ááŻáľ áĄáášáłáá Characters áąááźááŻá HTML á ážáááłááá¸ááŻáľáˇááŹáˇááŹáąááźáá˝áááŤááá¸á
áĽááᏠ(<) or (>) ááŻááá˛á Characters áąááźááŻá Browser á Text áá˛á Tag áá˛ááá˝áŹáˇááźáŹáˇáá˝áŹááŻááˇáá˛ááĄááźáḠHTML áá˛á Source Code áá˝áŹ ááŻááá¸ááŻááá¸ááá¸áśááŻááááááŤáá°áˇá ááŽááŻááąáááŹáášáłááˇáá˝áŹ áĄá˛áááŻá reserved ááŻáá¸ááŹáˇáá˛á characters áąááźááŻááĄááŻáľáˇáżáááá¸ááŻáááá¸
Page 55 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
&entity_name; ááŻáááááŻáḠ&#entity_number; ááŻááżááŽáˇ áááśá¸ááźáá¸áˇáĄááŻáľáˇáżááłáááŤáááá¸áśááḠ.. ááŤáąážááŹáá¸áś (<) ááŻá Browser áá˝áŹáżááá¸ááŻááá¸ááŻáááĄááźáḠ&lt; ááŻáááááŻáḠ&#60; ááŻáááŻáľáˇáąááˇáááŤááḠ⌠áąáĄáŹáá¸á፠áááŹáˇá HTML Entities áąááźáĄááźáḠReserved Characters áąááźáá˛áżáá á¸ááŤááá¸á
Result
Description
Entity Name
Entity Number
non-breaking space
&nbsp;
&#160;
<
less than
&lt;
&#60;
>
greater than
&gt;
&#62;
&
ampersand
&amp;
&#38;
¢
cent
&cent;
&#162;
ÂŁ
pound
&pound;
&#163;
ÂĽ
yen
&yen;
&#165;
âŹ
euro
&euro;
&#8364;
§
section
&sect;
&#167;
Š
copyright
&copy;
&#169;
ÂŽ
registered trademark
&reg;
&#174;
â˘
trademark
&trade;
&#8482;
<body> <p align="center">Copyright &copy; 2009. All rights reserved. World Wide Myanmar Training Center.</p> </body>
Page 56 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
áĄááá¸ááŤááŻáľáá˝áŹ Š áĄá áŹáˇ &copy; ááŻáááŹááŻá code áá˝áŹ áąááˇááá¸áśáąááˇáááŤááá¸á
Anchors ááŻááᏠHyperlink áá á¸ááŻáᲠáżáá á¸ááá¸á áá°áá˛á tag ááąááŹáś <a> / ááá¸áá˝á Document áá˛áá˝ á áŹáá á¸ááŻá á áŹáááŻáḠáá á¸ááŻááŻá ááŻáá¸áášáľáąáášáŹá¸ááźáŹáˇ áąááŹáá¸ááźáŹáˇáášáá¸ááá¸ááŻáááá¸áąááŹáś Anchor ááŻáááŻáľáˇáąááˇáááŤááá¸á
áż. Anchors á href ááŻááá˛á attribute ááŻáááŻáľáˇáżááŽáˇ Document áá á¸ááŻááŻáááźáŹáˇááŻáá Link ááá¸ááŽáˇááá¸á á. Name attribute ááŻáááŻáľáˇáżááŽáˇ Document áá˛áá˝áŹ bookmark ááŻáááá¸áąááŹáá¸ááá¸âŚ ááŤááŻáááá¸áąááŹáś anchor <a> tag ááŻááĄááŻáľáˇáżááłáąááˇáááŤááá¸á WorldWideMyanmar ááŻááá˛á hyperlink áá á¸ááŻááŻáááá¸áąááŹáá¸ááá¸ááŻáááá¸âŚ.
<a href="http://www.worldwidemyanmar.com">WWM</a> áĄáąááá code áĄááŻááá¸áˇ áąááˇáąááˇáááŤááá¸á Hyperlink to a document:
<a href="http://www.worldwidemyanmar.com">WWM</a>
Hyperlink to a Bookmark in the current document:
<a href="#Bookmark1> Link text that leads to Bookmark1 in the current document </a> Hyperlink to a Bookmark in an external document:
<a href="http://www.worldwidemyar.com/index.html#Bookmark1"> Link text that leads to Bookmark1 in index.html at www.foo.com </a> Name attribute ááąááŹáś áĄáąááá href áá˛ááĄáá°áá° ááźá˛áżááŽáˇ áĄááŻáá¸ááŻáá¸ááŤááá¸á áąáĄáŹáá¸ááŤááŻáľá áľáášáłááˇáąááŤá ..
<a name="Bookmark1">This text is now marked by Bookmark1!</a> áĽáááŹáąááźáá˛á áá˝áĽá¸áżááŽáˇážááá¸áśááąáĄáŹáá¸âŚ áá˝áźáá¸áąááŹá¸ááŻáááá˝áŹ á áŹáąááźáĄáżááá¸áśáá˛á Document áá á¸ááŻáá˝áááá¸ááŻáááḠáĄá˛á Document ááŻá áĄáąááááąááąáĄáŹáá¸ááŻá scroll
Page 57 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
áąááˇááŻáááźá˛áżááŽáˇ ááá¸ááźáŹáˇáááŤááá¸á áĄá˛áááŤáąááźááŻá áĄááźáá¸ááá°áąáášáŹá¸ááŻááá¸ááŻáááĄááźáḠáąáĄáŹáá¸á፠áĄááŻááá¸áˇááŻáľáˇááŻááá¸ááŤááá¸á
<body> <a href="#paragraph1">Jump to Paragraph 1</a><br/> <a href="#paragraph2">Jump to Paragraph 2</a><br/> <a href="#paragraph3">Jump to Paragraph 3</a><br/>
<a name="paragraph1">This is Paragraph 1 and text......</a><br/><br/> <a name="paragraph2">This is Paragraph 2 and text......</a><br/><br/> <a name="paragraph3">This is Paragraph 3 and text......</a> </body> áĄáąááá ááŻáľáá˝áŹ Jump to Paragraph 1 ááŻáááŻááá¸ááŻááá¸áżááŽááŻáááŹáá˛á address bar áá˝áŹ #paragraph1 ááŻááżááŽáˇááŻáááŹáᏠpage áááá¸áˇ This is Paragraph 1 and textâŚ.. ááŻááá˛á ááŽááŻá áąááŹáá¸ááźáŹáˇááŤáááá¸áśááá¸âŚ áĄá˛ááááŻááᲠJump to Paragraph 2 ááŻáááŻááá¸ááḠParagraph 2 ááŻááąááŹáá¸ááźáŹáˇááŤáááá¸áśááá¸.. ááŤá Local Page áá˛á content áąááźááŻá name attribute áá˛á hyperlink
áąáááżááŽáˇááŻáľáˇááŹááŤâŚ
External
Link
ááŻáááá¸áąááŹáś
href=www.yourwebsite.com/yourfile.html#nameattribute ááŻááżááŽáˇáąááááŻáááŻááá¸ááŤááá¸á Anchors á áĄááá¸á page áá˛áá˝áŹ #anchorname ááá˝ááá˛ááĄá፠ááŹáżááááŹáá˝áááá¸ááŤáá°áˇá áá°á ááá¸áˇ page áá˛á áááá¸ááŻáľáˇááŻááᲠáąááźáˇáášáá¸áąááŹáá¸áá˝áááźáŹáˇááŤáááá¸áśááá¸âŚ
Body Elements áĄááźáá¸áˇáá˝áŹ style sheet ááŤáá˛âŚ áĄááŻáľáˇáášáŹáˇáá˛á tag áąááźááąááŹáś <div> áá˛< á span> ááŤá áá˝á á¸ááŻá ááŻáľáˇá HTML styling áĄááźáá¸ááŤáá˛á
<span> áá˛á <div> ááŻáááá˛á áĄááŻáá¸ááŻáá¸ááŻáľáá˛á áá°ááŻáááá˝á á¸ááŻáá˛á ááźáŹáżááŹáˇáášáá¸áąááźááŻá áąáĄáŹáá¸á፠áĽáááŹáąááźááŻáážááá¸áśáżááá¸áˇáżááá¸áś
Page 58 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
ááááŹááá¸áá˝áŹáˇáąá ááŤáááá¸áśááá¸á Tags
áá˝áá¸áˇááá¸áˇáášáḠáá˝áá¸áś áĽáááŹ
<span>
Inline Element áá á¸ááŻáá˛áżáá á¸ááá¸á áĽáááŹ-
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <title>Style Sheets by WWM</title> </head> <body> <p>This is just demostration for <span> Style Sheet in Body Elements </span> by WWM</p> </body> </html> ááŽáĄááŻááá¸áˇááŻáááḠspan ááá¸áśááŹáˇáᲠáááááá˛á á áŹááŻááá¸á ááŹáá˝áąáżááŹáá¸áˇáá˛ááźáŹáˇáá˝áŹáááŻáá¸ááŤáá°áˇá ááŤáąááá˛á ááá¸áˇááŻá style áĄááá¸áˇááá¸áąáżááŹáá¸áˇáášáá¸ááá¸ááŻáááḠáĄáąááá Head Elements áá˝áŹ Style Tag ááŻáááŻáľáˇáżááŽáˇ color áĄááŽáąááŹáá¸ááá¸áśážááá¸áśááŤááá¸.. áżááŽáˇááḠááá¸áˇ class ááŻá <span class=âtestâ> ááŻááżááŽáˇáąááááŻáľáˇááŻááá¸ááá¸ááŻáááá¸
<span></span>
ááŽáá˝á á¸ááŻážááŹáˇá
á áŹááŹáˇáąááˇáąááźá
áĄááŽáąááŹáá¸áąáżááŹáá¸áˇááźáŹáˇááŤááááśá¸ááá¸âŚ
Class attribute ááŻáááŻáľáˇáżááŽáˇ á áŹááŻáľáˇááŻá áĄááŽáąááŹáá¸áąáżááŹáá¸áˇááŹáˇááŹááŤá
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head>
Page 59 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET <title>Style Sheets by WWM</title> <style type="text/css"> span.test {color: #ff0000} </style> </head> <body> <p>This is just demostration for <span
class="test">Style Sheet in Body Elements </span>by WWM</p> </body> </html>
<div>
áᎠtag ááŻá block elements ááŻááżááŽáˇáĄááŻáľáˇáášáŹáˇážáááŤááá¸á <span> tag áá˛áááá°ááŹá <div> tag á á áŹááŻááá¸áášáŹáˇáá˛ááąáááŹáá˝áŹááŻáľáˇážáááŹáąááźááááŤááá¸á
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <title>Style Sheets by WWM</title> <style type="text/css"> div.important {color: #ff0000} </style> </head> <body>
Page 60 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET <p>Congratulations on the purchase of your sword!
Using a sword is fun and easy. Just be sure to follow these important safety tips. </p> <div class="important"> <p> <em>Never</em> hold your sword by the pointy end. </p> <p> <em>Always</em> be sure to stick the pointy end into the other guy before he does the same to you. </p> </div> <p> And remember, if you or your surviving kinsfolk are not fully satisfied, we have a money-back guarantee! </body> </html> ááŤá Example ááŤá
<div align="right" class="greensection" style="color: lime">div text</div> <div> element áá˝áŹ áá°ááá˛á ááŻááá¸ááŻááḠattribute áąááźáąááŹá¸áąááŹá¸áášáŹáˇáášáŹáˇáá˝áááŤááḠ.. áĄááŻáľáˇážáá¸áá˛á tag áĄáášáłááááŻááąááŹá¸áżáááŻááá¸ááŤááá¸á Tag
Example
<div align=?>
<div align=âcenterâ> or <div align=âleftâ> or <div align=ârightâ> or <div align=âjustifyâ>
<div width=?>
<div width=â2â> , Pixel or Interger Value áášáŹáˇááŹáżáá á¸ááá¸á
<div height=?>
<div height=â2â> , Pixel or Interger Value áášáŹáˇááŹáżáá á¸ááá¸á
áĄáᯠáá˝áźáá¸áąááŹá¸ááŻáá <div> áá˛á <span> ááŻááąááŤáá¸áˇáżááŽáˇáąááŹáś áĽááᏠážááá¸áśááŤááá¸âŚ áĄááŽáąááŹáá¸áąáżááŹáá¸áˇááźáŹáˇááŤááááśá¸ááá¸âŚ
Page 61 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET <span class=âtestâ> áąážááŹáá¸áś áąááááŹááŹááŤá <div class=âimportantâ> áąážááŹáá¸áś áąááááŹááŹááŤá
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <title>Style Sheets by WWM</title> <style type="text/css"> div.important {color: #ff0000} span.test {color: #ff00ff} </style> </head> <body> <p>
<span
class="test">Congratulations</span>
on
the
purchase of your sword! Using a sword is fun and easy. Just be sure to follow these important safety tips. </p> <div class="important"> <p> <em>Never</em> hold your sword by the pointy end. </p> <p> <em>Always</em> be sure to stick the pointy end into the other guy before he does the same to you. </p> </div> <p> And remember, if you or your surviving kinsfolk are not fully satisfied, we have a money-back guarantee! </body>
Page 62 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
</html>
Line Breaking ááŻááᏠá áŹáąážááŹáá¸áˇááŻá áąáĄáŹáá¸ááŻá ááźá˛áášááŻááá¸áżááá¸áˇáá˛áżáá á¸ááá¸á áĄááŻáľáˇáżááłáá˛á áĄááá tag ááąááŹáś <br/> ááŻáááŹááŤáá˛á
ááŤá Example ááŤá
<p>This is a line of text with a linebreak here.<br /> This is text after</p> ááŤááŻáááá¸
This is a line of text with a linebreak here This is text after ááŻááżááŽáˇ áá˝á á¸áąážááŹáá¸áˇáżáá á¸ááźáŹáˇááŤáááá¸áśááá¸.. áĄá˛áááŻá áá˝á á¸áąážááŹáá¸áˇáżáá á¸áąáĄáŹáḠááááááźá˛áášáášáá¸áá˛á áąáááŹáá˝áŹ <br/> ááŻááá˛á tag áąááˇááŻááášááŹáˇááŻááá¸ááŻáľááŤáᲠ⌠Line Breaking áá˝áŹ <br/> áá á¸ááŻááá¸áˇáááŻáá¸ááŤáá°áˇ .. áĄááá¸á áá˝áźáá¸áąááŹá¸ááŻáááąááˇááŹáˇáá˛á á áŹáąážááŹáá¸áˇááŻá áááźá˛áášáá¸áá°áˇ áá á¸ááá¸ááá¸áˇáá˛áżáá á¸áąá áášáá¸ááá¸ááŻáááḠ<nobr> tag ááŻáááŻáľáˇáąááˇáááŤáááá¸áśááá¸âŚ áá˝áźáá¸áąááŹá¸ááŻáááąááˇááŻááá¸áá˛á á áŹááŹáˇá áĄááá¸áˇáá˝áá¸áąáááá¸
<br>
áááľááŹáˇáąááŹá¸ááá¸áˇ
áąááŹáá¸áá á¸áąážááŹáá¸áˇááá¸áˇááźáŹáˇáąááˇááŤááá¸..
browser
ááŤááŻááášáŹáˇáááŻááášáá¸áá°áˇááŻáááá¸
á
áá°ááá˛á
<nobr>
width
ááŻáááŻáľáˇáááŤááá¸á
áżááá¸áśáżááŽááŻáááŹáá˛á <br/>
ááŻá
áá á¸ááŻááá¸áˇáąááˇáąááá˛á <nobr> ááąááŹáś áĄááźáá¸áśáĄáááḠtag áąááźááŤážáá¸ááŤááḠ.. (<nobr>your text</nobr>)
á áŹááá¸áˇáąááźá ááźáá¸ááźáŹáˇááŤááḠ..
<p>This is a line of text with a linebreak here.<br /> This is text after</p> <p><nobr>This is a run of nobreak text to be used as an example, This is a run of nobreak text to be used as an example, This is a run of nobreak text to be used as an example, </nobr></p> ááŻáááŻáážááá¸áśá፠.. <nobr> ááŻáááŻáľáˇááŹáˇáá˛ááĄááźáḠbrowser á automatic line break áááŻáá¸ááźáŹáˇááŤáá°áˇá
Page 63 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
ááľááŤáá¸á áĽá¸áąááˇáąááźááá¸ááá¸âŚ Bullet áąááˇáąááźááá¸áżááŽáˇ ááááááŻáááá˛á áá°á ááá¸áˇ áąááźá ááá¸áˇ á ááá¸ááŻááááŻáááá¸áᏠááá¸ááá¸ááŻáááá¸áąááŹáś List Element ááŻáááŻáľáˇáąááˇáááŤááá¸á
List Element ááŻááá˝áźáá¸áąááŹá¸ááŻáá áąáááŻáášáĄáŹáˇáżááá¸áś ááŻáľáˇááŻááá¸áˇááŻááá¸áˇááŻááá¸ááŤááá¸âŚ ááŤáá˝áá˝áá¸ááááźáá¸áá˝áŹááŤá áż. Physical List Styles á. Virtual List Styles á. List Items ááŻááżááŽáˇ ááźá˛áżááŹáˇááŻááá¸ááŤááá¸.. áá á¸ááŻáżááá¸áˇá áŽáá˛ááá°ááŻáááá˝áŹááŤážáá¸áá˛á tag áąááźááŻá ážáááśá¸ááąáĄáŹáá¸á List
áá˝áá¸áˇááá¸áˇáášáḠáá˝áá¸áś áĽáááŹ
Physical List Styles
ááŽáĄáá˛áá˝áŹ <ul><ol><dl> áąááźááŤážáá¸ážáááŤááá¸á Tag
áá˝áá¸áˇááá¸áˇáášáḠáá˝áá¸áś áĽáááŹ
<dl>
Definition List ááŻáááąááááŤááá¸á ááá¸áˇ element áá˛áá˝ content áášáŹáˇá áĄáááá¸áŤáḠáąááŹá¸áżááášáá¸áĄááźáá¸ááŻáľáˇááá¸á
Definition Term Definition
<dl> <dt>Term 1</dt> <dd>Term 1 definition</dd> <dt>Term 2</dt> <dd>Term 2 definition</dd> </dl> ááŤáąážááŹáá¸áś Definition Term áá˛á Definition áąááźá áŻááŹáˇáá˛á List ááŻá Definition List <dl> ááŻáááąááááŻáááá¸á <ol>
Ordered List <ol>á ááá¸áˇ element áá˛áá˝áŹáá˝ááá˛á <li> áąááźáá˛á content áąááźááŻá
áĄá áĽá¸ááŻááá¸
áąáááŹáášááŹáˇáąááˇááá¸âŚ
A,B,C,D
ááŻáááááŻáá¸
1,2,3,4 áĄá˛áááŻá áĄá áĽá¸ááŻááá¸áášááŹáˇáąááˇááŹááŻááąáżááŹááŹááŤá
<ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li>
Page 64 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET </ol> áĄá˛áááŻáááŻáááḠBrowser áá˝áŹ áąáĄáŹáá¸ááŤáĄááŻááá¸áˇ Default value áżáá á¸áá˛á 1., 2., 3⌠áąááźááŻáááá¸áśáąááˇááźáŹáˇáá˝áŹááŤá
1. List item 1 2. List item 2 3. List item 3 áĄááá¸á ááááá ááá¸ážáááłáá¸ááá¸áżááŽáˇáżááá¸ááá¸ááá¸ááŻáááá¸áąááŹáś ááá¸áˇáá˝áŹ ááŻááá¸ááŻááḠattribute áąááźáá˝áááŤááá¸.. áĄá˛áááŤáąááźááąááŹáś..
<ol type="A" start="3"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> Attribute
áá˝áá¸áˇááá¸áˇáášáá¸
<ol type=â?â>
áá°ááąááŹáś áąáá˝áááŻáľáˇáá˝áŹ áĄá áĽá¸ááŻááá¸ááá¸áá˛á ááľááŤáḠáááŻááááŻáá¸
áĄááĄááŹááŻá
ááá¸áá˝áá¸ááŻááá¸ááŤááá¸á
áĽáááŹâŚ
<ol type="A" Or <ol type="a" Or <ol type="1" Type áá˛á value áąááźááąááŹáś
none [no marker is used] A [capital letters] a [lower-case letters] I [large roman numerals] i [small roman numerals] upper-alpha [capital letters] lower-alpha [lower-case letters] upper-roman [large roman numerals] lower-roman [small roman numerals] decimal [integer numbering DEFAULT] disc [default solid bullet]
Page 65 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET square [solid square] circle [hollow bullet] round [hollow bullet] <ol
áąáá˝áááŻáľáˇáá˝áŹááá¸áá˛á ááľááŤáḠááŻáááááŻáḠáĄááĄááŹá
start=âvalueâ>
ááá¸ááąáá áá˝áŹáá˛ááŻááᏠááá¸áá˝áá¸áąááˇáááŹááŤá áĽáááŹ
type=â1â
ááŤááŻá
áá áášáá¸ááá¸ááŻáááá¸
áá˝áźáá¸áąááŹá¸ááŻááá
5
start=â5â
ááŻááżááŽáˇááá¸áśáąááˇáááŤááá¸á áĄá˛áááŻáááŻáááá¸
List
á
5,6,7âŚ.
áĄá˛áááŻá
áĄá áĽá¸ááŻááá¸ááźáŹáˇááŤáááá¸áśááḠâŚ
<ol start="A" Or <ol type="E" Or <ol type="5"
<ul>
Unordered List ááąááŹáś Ordered List áá˛ááááá¸áááźáŹááŤáá°áˇ .. ááŤáąááá˛á áá°ááá˛á default ááŻáľá áľááąááŹáś bullet áąááˇáąááźáá˛á List ááŻááżáááŹááŤáá˛á
<ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> áĄá˛áááŻáááŻáááḠBrowser áá˝áŹ áąáĄáŹáá¸ááŤáĄááŻááá¸áˇ Default value áżáá á¸áá˛á Disc Bullet áąááˇáąááźááŻáááá¸áśáąááˇááźáŹáˇáá˝áŹááŤá
. List item 1 . List item 2 . List item 3 áĄááá¸á ááááá ááá¸ážáááłáá¸ááá¸áżááŽáˇáżááá¸ááá¸ááá¸ááŻáááá¸áąááŹáś ááá¸áˇáá˝áŹ ááŻááá¸ááŻááḠattribute áąááźáá˝áááŤááá¸.. áĄá˛áááŤáąááźááąááŹáś..
<ul type="A" start="3"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul>
Page 66 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET Attribute
áá˝áá¸áˇááá¸áˇáášáá¸
<ul type=â?â>
áá°ááąááŹáś áąáá˝áááŻáľáˇáá˝áŹ áĄá áĽá¸ááŻááá¸ááá¸áá˛á ááľááŤáḠáááŻááááŻáá¸
áĄááĄááŹááŻá
ááá¸áá˝áá¸ááŻááá¸ááŤááá¸á
áĽáááŹâŚ
<ul type="A" Or <ul type="a" Or <ul type="1" Type áá˛á value áąááźááąááŹáś
none [no marker is used] A [capital letters] a [lower-case letters] I [large roman numerals] i [small roman numerals] upper-alpha [capital letters] lower-alpha [lower-case letters] upper-roman [large roman numerals] lower-roman [small roman numerals] decimal [integer numbering] disc [default-solid bullet] square [solid square] circle [hollow bullet] round [hollow bullet] <ul
áąáá˝áááŻáľáˇáá˝áŹááá¸áá˛á ááľááŤáḠááŻáááááŻáḠáĄááĄááŹá
start=âvalueâ>
ááá¸ááąáá áá˝áŹáá˛ááŻááᏠááá¸áá˝áá¸áąááˇáááŹááŤá áĽáááŹ
type=â1â
ááŤááŻá
áá áášáá¸ááá¸ááŻáááá¸
áá˝áźáá¸áąááŹá¸ááŻááá
5
start=â5â
ááŻááżááŽáˇááá¸áśáąááˇáááŤááá¸á áĄá˛áááŻáááŻáááá¸
List
á
5,6,7âŚ.
áĄá˛áááŻá
áĄá áĽá¸ááŻááá¸ááźáŹáˇááŤáááá¸áśááḠâŚ
<ul start="A" Or <ul type="E" Or
Page 67 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET <ul type="5"
áĄáąáááĄááá¸áˇá Ordered List áżáá á¸áżááŽáˇ áąáĄáŹáá¸ááá¸áˇááąááŹáś Unordered List áżáá á¸ááá¸á Virtual List Styles
ááŽáĄáá˛áá˝áŹ <menu><dir> áąááźááŤážáá¸ážáááŤááá¸á ááŤáąááźáĄáŹáˇááŻáľáˇá áĄáąáá <ol><ul> tag áąááźáá˛á áĄáá°áá°ááŤáá˛âŚ ááŤáąážááŹáá¸áś áá á¸áášáłáá attribute áąááźááŻááąááŹáś áĄáąáááá˝áŹáá˛ážáááśá¸ááŤá Tag
áá˝áá¸áˇááá¸áˇáášáḠáá˝áá¸áś áĽáááŹ
<menu>
áąáááŻáášáĄáŹáˇáżááá¸áś áᎠtag ááŻá line per item áĄááźáá¸ááŻáľáˇááŤááḠâŚ
<menu> <li>First item in the list</li> <li>Second item in the list</li> <li>Third item in the list</li> </menu> <dir>
áá°ááąááŹáś short item áĄááźáá¸ááŻáľáˇááŤááḠâŚ
<dir> <li>A - H</li> <li>I - M</li> <li>N - R</li> <li>S - Z</li> </dir> ááŽ
tag
áąááźá
áĄáżáá á¸ááŹáˇááŤááá¸âŚ
<ul>
tag
áá˛á
áá á¸áżááŹáˇ
bullet
áąááźáá˛á
default
ááŻáľá áľáąáżááŹáá¸áˇááŻáľáˇáášáá¸ááá¸áąááŹáś
áĄáąááááĄááŻááá¸áˇ type attribute áąáżááŹáá¸áˇáżááŽáˇááŻáľáˇááŻáááááŤááá¸á List Items
Data Information áąááźáĄááźáḠáąááŹá¸áżááąááˇááá¸áżáá á¸ááŤááá¸âŚ áá°ááá˝áŹááŤážáá¸áá˛á tag áąááźááąááŹáś <li> ááŻááá˛á List , <dt> Definition Term
Page 68 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET <dd> Definition áąááźááŤážáá¸ážáááŤááá¸.. áĄáąááá
áĄááŻáľáˇáżááłááŻáľáąááźááŻáážááá¸áś
ááŻááá¸ááŹáá˛á
ááŤáąááźá
áĄáąááźáĄáá°áˇ
áąáżááŹá ááŹáááŻááąááŹáá¸áąááŹáśááŤáá°áˇá áąáĄáŹáá¸á፠áĽáááŹáá˝áŹááŻáááá¸áąááŹáś áĄááŻáąáżááŹáá˛á List áąááźáĄáŹáˇááŻáľáˇ ááŤááŤááá¸á
<dir> <li>A - H</li> <li>I - M</li> <li>N - R</li> <li>S - Z</li> </dir>
HTML áá˛ááŻá Video , Sound, Image á ááá¸áś Multimedia áá˛ááá¸ááá¸áá˛á áĄááŻááá¸áˇáąááź áąááŹá¸áąááŹá¸áášáŹáˇáášáŹáˇááá¸áśááźáá¸áˇáĄááŻáľáˇáżááłážáááŤááá¸á áąáááá¸áá˛áááŻáľ áá á¸ááŻááá¸áááá°áˇ áá˝ááá˛á Web Page áá á¸ááŻáżáá á¸ááŹááŻáá Multimedia áĄááŻááá¸áˇáąááˇáąááź ááá¸áśáąááˇááá¸áśááŤááḠ⌠Plain Text áąááźáá˛ááŻáááḠááá¸áá°áá˝ á ááá¸ážáá¸á áŹáˇáá áá˝ááá˝áŹáááŻáá¸áąááŹáśááŤáá°áˇá Multimedia áĄááŻááá¸áˇáá˝áŹ áá˝áźáá¸áąááŹá¸ááŻá áąáĄáŹáá¸ááŤáĄááŻááá¸áˇ Tag áĄáášáłáá ááźá˛áżááŹáˇáąááŹá¸ááŻáá¸áąááˇááŻááá¸ááŤááá¸á <img> <bgsound> <sound> <area> <map> <object> á ááá¸ááŻáááá˛áżáá á¸ááŤááá¸á Note: - Tag áá á¸ááŻá áŽááŻááá¸áˇáá˝áŹ ááŻááá¸ááŻááḠattribute áá˝áááá¸ááŻááᏠááá¸ááľááááąááˇááŻááá¸ááŤááá¸á áá˛.. ážáááśá¸ááŻááá¸ááąáĄáŹáá¸.. Tag
áá˝áá¸áˇááá¸áˇáášáḠáá˝áá¸áś áĽáááŹ
<img>
<img> tag áá˝áŹ ááŻááĄáá¸áá˛á attribute áá˝á á¸ááŻáá˝áááŤááá¸âŚ áĄá˛áááŤáąááźááąááŹáś src ááŻáááąáááá˛á Source (ááŻáľááŹáˇáᏠááá¸áˇáąážááŹáá¸áˇ) áá˛á alt ááŻáááąáááá˛á alternative text (ááŻáľáĄáąáááá˝áŹ Mouse Pointer ááá¸ááŻááá¸ááŹáá˛á áąááŹá¸áżá) áąááźáá˛áżáá á¸ááá¸á
<img src="my-computer.png" alt="Computer">
Page 69 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <title>Multimedia by WWM</title> <body> <div align=center> <img src="http://www.planetcreator.net/images/pnc.png" alt="PlanetCreator"> Be Right Back <img src="my-computer.png" alt="Computer"> My Computer </div> </body> </html> áá°ááá˝áŹááŻáľáˇáá˛á attribute áĄááá¸áˇááá¸áá˝áááŤááá¸á attribute
áá˝áá¸áˇááá¸áˇáášáḠáá˝áá¸áś áĽáááŹ
<img align=?
ááŻáľááŻá text áá˛á ááá¸áᏠáĄáąáááąáĄáŹáḠááŹáˇáášáá¸ááá¸ááŻáááḠalign ááŻááá˛á attribute ááŻáááŻáľáˇáąááˇáááŤááá¸á áąáĄáŹáá¸ááŤááŻáľáá˝áŹ alig=ârightâ ááŻááżááŽáˇááŹáˇááŻááá¸áá˛á áĄááźáḠááŻáľá ááŹááá¸áá˛ááŻá áąááŹáá¸áąááᏠáąááźááááŤááááśááḠâŚ
Page 70 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<img src="my-computer.png" alt="Computer" align=ârightâ> Align attribute áá˝áŹ Left | Right | Top | Texttop | Middle | Absmiddle | Baseline | Bottom | Absbottom ááŻááżááŽáˇ value áąááźááŻáľáˇááŻáááááŤááá¸á áááŻáá¸ááŻááḠáá á¸ááŻáżááá¸áˇ á áá¸áˇážááá¸áśááŤá <img width=?> <img height=?>
ááŤáąááźááąááŹáś ááŻáľáá˛á áĄáášáŹáˇááŻááḠwidth áá˛á áĄááľ height áąááźááŻá ááá¸áá˝áá¸ááŹáá˛áżáá á¸ááá¸á
ááá¸áśááźáá¸áˇááá˛á
value
ááąááŹáś
Positive integer pixel values áąááźáá˛áżáá á¸ááá¸á <img src="my-computer.png" alt="Computer" height=â50â width=â30%â>
<img vspace=?> <img hspace=?>
Vertical space ááŻá vspace ááŻááżááŽáˇááŻáľáˇááḠ.. áá°ááąááŹáś ááŻáľáá˛á áĄáąááááŻááá¸áˇ
ááŻáááááŻáá¸
áąáĄáŹáá¸ááŻááá¸áˇááŻá
white
space
ááá¸áśááźáá¸áˇááŹáá˛á top and bottom padding ááá¸áśááá¸ááŻáá áá á¸áášáłááá ááá¸áá˝áá¸ááá¸á Horizontal space ááŻá vspace áĄáąááá˛áááŻáľáˇáᏠáá°áááąááŹáś ááá¸ááŻáááááŻáḠááŹááá¸áá˛áá˝áŹ white space ááá¸áśááźáá¸áˇááŹáá˛á Left and right side padding ááá¸áśááá¸ááŻáá ááá¸áˇáąááááá¸á <img
src="my-computer.png"
alt="Computer"
hspace=â50â vspace=â20â> ááá¸áśááźáá¸áˇááá˛á value áąááźááąááŹáś Positive integer pixel values áąááźáá˛áżáá á¸ááá¸á
Page 71 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<img vspace= â20â
<img hspace= â50â
<img border=?>
ááŻáľáá˛á
áąááˇááá¸ááá¸á
áąááŹáá¸áĄáá°áĄááŤáˇááŻá
áżááá¸ááá¸ááŻáááá¸
border ááŻáááŻáľáˇáąááˇáááŤááá¸á
<img border= â20â
<img src="my-computer.png" alt="Computer" border=â20â> My Computer <img
Usemap ááŻá <map> tag áá˛áááźá˛áżááŽáˇááŻáľáˇáąááˇáááŤááḠ⌠map tag
usemap="?â>
áá˛á name attribute áá˝áŹ áąážááżááŹááŹáˇááŹááŻá img ááąá áá°ááŻáľáˇááŹáá˛áżáá á¸ááá¸á
map
tag
ááŻááąááŹáś
áąáĄáŹáá¸áá˝áŹáżáááŹáˇááŤááá¸á <bgsound>
Web
document
áá á¸ááŻááŻá
ááźáá¸áśážááá¸áśáąááá˛ááĄáášááá¸áá˝áŹ
áąááŹáá¸ááľááŽáášáá¸áˇááľáąááˇáąááź
ááá¸áśááá¸ááŻáááá¸áąááŹáś <bgsound> ááŻáááŹáąááˇááŻáááŻáľáˇáąááˇáááŤááá¸âŚ.
<bgsound src="http://www.worldwidemyanmar.com/i-want-to-understandu.mp3" loop="infinite" /> Loop ááŻááá˛á attribute ááąááŹáś ááŽááŽáášáá¸áˇááŻá ááá¸áá˝á á¸ážáááḠááźáá¸áśáá˝áŹáá˛ááŻáááŹááŤá <bgsound>
á
áĄááŻáĄáášááá¸áá˝áŹáąááŹáś
áĄááŻáľáˇááá¸áˇááŤááá¸âŚ
áĄááá¸ááąááŹáś
áąááŹá¸áąááŹá¸áąááˇááŻáľáˇáá˛áááá¸áąááŤá .. embed ááŻááá˛á tag ááŻááĄááŻáľáˇáášáŹáˇáááŻá <embed src="beatles.mid" /> Object tag
<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"> <param name="FileName" value="flower.wav" /> </object> Page 72 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
Hyperlink tag <a href="beatles.mid">Play the Beatles</a> á ááá¸ááŻáááááŻáĄááŻáľáˇáášáŹáˇááŹááŤááá¸á <sound>
<bgsound> áá˛ááááźáŹááŤáá°áˇ background áá˝áŹáá˛áĄááŻáľáˇáżááłááŹááŤá
<bgsound src="http://www.worldwidemyanmar.com/i-want-tounderstand-u.mp3" delay=â5â /> Delay ááŻááᏠWeb ááźáá¸áśáżááŽáˇááŹáá˛á áĄáášááá¸ááá¸áąááŹáá¸ážááŹáá˝âá˝ ááŽáášáá¸áˇááźáá¸áśááŻáááĄááźáḠááá¸áá˝áá¸áá˛á á áá áá¸áááŤá <map>
<map> tag á ááŻáľáá˝ ááááá ááá¸ážáááłáḠáąáżáááŻáľáĄááźáá¸áąááˇáąááźáášááŹááŤáᲠ⌠Adobe áá˛á Dreamweaver áá˝áŹááŻáááá¸áąááŹáś
ááŻááżááŽáˇááá˝ááŤááá¸á áĽáááŹááŻááĄááá¸ážááá¸áśááŤá <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <title>Multimedia by WWM</title> <body> <img src="my-computer.png" width="145" height="126" alt="My Computer" usemap="#mycomputermap" /> <map name="mycomputermap"> <area shape="rect" coords="100,100,50,50" alt="Monitor" href="monitor.html" /> <area shape="circle" coords="10,70,30" alt="System Unit" href="cpu.html" /> </map> </body> </html>
Page 73 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
áá˝áźáá¸áąááŹá¸ááŻáááá˝áŹ My Computer ááŻááá˛á ááŻáľáá á¸ááŻáľ áá˝áááá¸âŚ áĄá˛áááŤááŻá ááŻáľáá á¸ááŻááŻáľáˇááŻá áżáá á¸áąá ááŻáľáá˛á áá á¸á ááá¸áá á¸áąááááŻááżáá ḠMap tag áá˛á Link áąááźááŹáˇáżááŽáˇááá¸áá˝áá¸ááŻáááááŤááá¸á áĄáąááá Source Code áá˝áŹááŻáááḠmy-computer.jpg ááŻááá˛á ááŻáľáá á¸ááŻááá¸áˇááŻá Monitor ááŻááąááŹáá¸ááŻááá¸ááḠMonitor ááŻááżááŽáˇá áŹáąááááŹáááŻá Click ááŻááá¸ááŻááá¸ááḠmonitor.html ááŻááá˛á Link ááŻááąááŹáá¸ááźáŹáˇááŤááḠ.. ááŻáááĄáá° CPU ááŻáľáąááˇááŻáááá¸ááá¸áˇ áĄá˛ááĄááŻááá¸áˇáᲠcpu.html
ááŻááąááŹáá¸ááźáŹáˇááŤááááśá¸ááḠâŚ
ááŤááŻá
áĄáá°áˇáżááłááŻáá¸áąááŹáá¸áąááˇááŹáąááźá
coords ááŻááá˛á attribute áá˛áżáá á¸ááá¸á
monitor.html
cpu.html
map áá˛á shape attribute áá˝áŹ value ááŻáľáˇáášáłááˇáá˝áááŤááá¸á rect, circle, poly áąááźáá˛áżáá á¸ážáááḠ⌠coords áá˝áŹ rect left-x, top-y, right-x, bottom-y circle center-x, center-y, radius poly x1, y1, x2, y2, ..., xN, yN ááŻááżááŽáˇááŻááá¸áˇááŹááŤááá¸á ⌠áĄáąááá ááŻáľáá˝áŹááąááŹáś coords="100,100,50,50" ááŻááżááŽáˇáąááˇááŹáˇááŹááŤá ááŤáąááźáá˛á ááźáá¸áášáá¸ááááŻááąááŹáś ááŻáľáˇááŤáášáŹáˇááḠááźáá¸áá°ááźáŹáˇááŤáááá¸áśááḠ⌠áąááŹáá¸ááá¸
áĄáąááá
áąááˇááá¸ááá¸áá˝áŹ áá˝áááá¸ááŻáááŹááŻá
ááŻáľáá˝áŹ
áá°áˇáżááŹáˇááźáŹáˇááŹáá á¸ááŻáá˝áááḠâŚ
áĄáżááŹáąááŹáá¸ááŻáľá áľáąáᡠááááŹáąáĄáŹáá¸
áĄá˛áááŤááąááŹáś
ááá¸ážáá¸ááŹááŤááá¸..
áżááąááˇááŹáˇááŹááŤâŚ
ááľáŻáá˛á
ááŽááŻáľáá˝áŹ
áĄááá¸á
ááŽ
Link
Link
ááŻá
ááąáááąá áášáá¸áá°áˇááŻáááá¸áąááŹáś border=â0â ááŻáááŹáąááˇááŻá ááá¸áśáżááŽáˇááŻáľáˇááŻáá áááŤááá¸á áĄá˛áááŻáááŻáááḠáĄáżááŹáąááŹáḠáąááŹáá¸áąáᡠáąáášáŹáá¸ááźáŹáˇááŤáááá¸áśááḠ⌠<object>
áᎠtag á multimedia ááá¸áááá°áˇ áá á¸áżááŹáˇ html ááŻááá¸áᏠembedded content
áąááźáá˝áŹ
áĄá áŹáˇááŻááˇááŻáľáˇááŻáááááá¸.. ááŻáľáˇáąáážáááá¸âŚ APPLET, EMBED, BGSOUND, SOUND and IMG elements
ááŻáááąááźáá˛á ááŻááá¸á áŹáˇ
ááŻáľáˇááŻáááááá¸á
<object
Page 74 of 197
codetype="application/java-vm"
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET codebase="http://www.worldwidemyanmar.com/applet.class " classid="java:program.start" height="100" width="100"> <param name="options" value="xqz" /> If you can read this you are too close.<br /> AND your browser does not support Java. </object>
áá°áá˝áŹááŻáľáˇáá˛á attribute áąááźááá¸áˇ áąááŹá¸áąááŹá¸áášáŹáˇááŤááḠ.. align, width, height áĄá˛áááŤáąááźááąááŹáś áá˝áá¸áˇáżáááŹáášáŹáˇáąááąááŹáś áá˝áá¸áááąááŹáá¸ááŤáżááŽá codebase ááŻááá˛á attribute
ááąááŹáś object code ááá¸ááŹáˇáá˝áŹáá˝áááá¸ááŻáááŹ
ááá¸áá˝áá¸áąááˇááŻáá URL áĄááźáá¸ááŻáľáˇááŤááá¸á codetype ááąááŹáś internet media type ááŻááąááááŻáááŹáżáá á¸ááá¸á ááá¸áĄáąáááá˝áŹ áĄáá˝áŽáżááłááá˛ááŻááąááŹáś classid áĄáąáááá˝áŹááŤá classid ááąááŹáś URL ááŻáááááŻáḠWindows Registry áá˝áŹ ááá¸áá˝áá¸ááŹáˇáá˛á values ááŻáááá¸áśáąááˇáááŹáżáá á¸ááá¸á
Block Formating áá˝áŹ áá˝áźáá¸áąááŹá¸ááŻááááŻááá¸ááá¸áśááŹáˇáá˛á content áąááźáááŻááŻáľá áľáášááŻáááĄááźáḠáĄááá ááŻáá¸áąááŹáá¸áąááˇááŤááá¸.
ááŽáąáááŹáá˝áŹ ááŤážáá¸áá˛á tag áąááźááąááŹáś <Address> <Hx> <P> <Blockquote> <Marquee> <Pre> <Center> <Multicol>
áąááźáá˛áżáá á¸ááá¸á Tag
áá˝áá¸áˇááá¸áˇáášáḠáá˝áá¸áś áĽáááŹ
<address>
Web Page
áąááźáá˝áŹ áááá¸á áŹáĄááźáá¸áąááˇáąááŹáśááá¸ááŻáááḠáᎠtag ááŻááĄááŻáľáˇáżááłááŹ
áášáŹáˇááŤááá¸á
Page 75 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<body> <address>1234 Nowhere St.<br />Anywhere, State 000019999</address> </body> ááŽ
tag
ááŻáááŻáľáˇááŻááá¸áá˛ááĄááźáá¸
áá°ááá˛á
Default
á
Italic
áąááˇáąááźáá˛ááąááŹá¸áżááąááˇááźáŹáˇááŤáááá¸áśááḠ⌠áá°ááá˝áŹááá¸áˇ align, height, width ááŻááá˛á attribute áąááźááŤáá˝áááŤááá¸á <Hx>
<h1>, <h2>, <h3>, <h4>, <h5>,<h6> ááŻááá˛á Heading áĄááźáá¸ááŻáľáˇáá˛á tag
(<h1>,
áąááźááŻááąáżááŹááŹááŤá 1 to 6 áĄáááá˝áááŤááá¸á
<h2>, <h3>, <h4>, <h5>, <h6>)
<body> <h1 align="center">Heading level 1 text</h1> <h2 align="center">Heading level 2 text</h2> <h3 align="center">Heading level 3 text</h3> <h4 align="center">Heading level 4 text</h4> <h5 align="center">Heading level 5 text</h5> <h6 align="center">Heading level 6 text</h6>
Page 76 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET </body>
<h6> á Point Size áĄááá¸ááŻáľáˇ áżáá á¸áżááŽáˇáąááŹáś <h1> ááąááŹáś Point Size áĄážááŽáˇááŻáľáˇááŤá Heading áĄááźáá¸áżáá á¸áá˛á ááá¸áˇááŻáááá˝áŹ Bold Type áąááźáá˛áżáá á¸ááá¸á <p>
Paragraph ááŻááąááŹá¸ááźáá¸áˇááŹáżáá á¸áżááŽáˇ á áŹáąááźááŻá ááŻáá¸áá˛áááźá˛áżááŽáˇáąááˇáášáá¸ááá¸ááŻáááḠáᎠtag ááŻáááŻáľáˇáąááˇáááŤááá¸á
<p align=ârightâ ááŻáááŻáľáˇááŹáˇáá˛ááĄááźáḠá áŹááŹáˇáąááź á ááŹááá¸áá˛ááŻáááá¸ááźáŹáˇááŹááŤ
<body> <p align="right">
* Very early versions of HTML (before 2.0) did not specify P as a container element, and some early browsers may become confused when seeing the tag. * Netscape versions 1.0-1.22 only understood ALIGN values of LEFT and CENTER. Support for ALIGN=RIGHT began in version 2.0.<p> <p> ááŻááżááŽáˇ á áŹáááŻáá¸ááźá˛ááŹáˇááŹááŤá
* he 'justify' value of the ALIGN attribute is currently only supported in the 4.0 Beta 2 and above versions of Netscape and Internet Explorer. </p> </p> </body>
á áŹááŻááá¸áášáŹáˇááŻá <p> tag ááŻáááŻáľáˇáżááŽáˇááźá˛ááŹáˇááŹááŤá <blockquote
áá á¸áášáłááá áŹááŹáˇáąááźá áĄááá¸áˇáá˝áá¸áášáŹáˇáąáááḠáá˝áźáá¸áąááŹá¸ááŻááá áĄááá¸áˇááá¸áąááŹáá¸áá˛
>
áąááˇááŹáˇááŹáá˛áżáá á¸áąá
áĄáżááŹáˇ
text
áąááźáá˛áááá°áá˛
áá á¸áááá°áˇáżááŹáˇá áźáŹ
Quote
ááŻáá¸ááá¸áá˝ááá¸ááŻáááḠáᎠtag ááŻáááŻáľáˇááŤááá¸á
Page 77 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<body> <h2>Code example: BLOCKQUOTE element</h2> <hr> filler text <blockquote cite="http://www.example.com/bqcitation.htm">blockquote text</blockquote> filler text <hr> </body> áĄáąááááŻáľáá˝áŹááŻáááḠQuote ááŻáá¸ááŹáˇáá˛á áąááŹáá¸áá á¸ááŻá
cite
áá˛áżáá á¸ááá¸á
ááŻááąááŹá¸áżááášáá¸ááá¸ááŻáááá¸áąááŹáś
cite
text áá˛á ááŻááˇááŻáᡠtext áá˛á ááŻáľááá°ááŤáá°áˇ ⌠Quote
ááŻáá¸ááŹáˇáá˛á
ááŻáááŻáľáˇáąááˇáááŤááḠ..
cite
Source á
url
URL ááŻá
ááźáá¸áśáá˝áŹáąááŹáśáááŻáá¸ááŤáá°áˇá <marquee>
Web page ááŻááąááˇáąááá˛ááĄáášááá¸áá˝áŹ á áŹááŻáľáˇáá˛á ááŻáľáąááˇáąááźá ááá¸ážáá¸áááá¸áá˝áŹáˇáááąááźááŤááḠááŻááżááŽáˇ ážááá¸áśááŻáááąááŹáá¸áˇááŤááḠ⌠á áŹááŹáˇáąááź áááá¸áąáááŹááŻáá.. áąááźááášáŹáˇáąáááŹááŻááááŻá áżááłááŻáá¸ááá¸ááŻáááá¸áąááŹáś <marquee> ááŻáááŻáľáˇáąááˇáááŤááá¸á
<body>
Page 78 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET <marquee> I'm marquee </marquee> </body>
ááŽáĄááŻááá¸áˇááŻáááḠIâm marquee ááŻááá˛á á áŹááŹáˇáąááˇá ááŹááá¸ááąá ááá¸ááá¸áá˛ááŻá ááźáŹáˇáąáááŤáááá¸áśááḠ⌠marquee áá˛á attribute áąááźááąááŹáś behavior, direction, bgcolor, height, width, loop, vspace, scollldelay á ááá¸ááŻáááá˛áżáá á¸ááá¸á attribute
áá˝áá¸áˇááá¸áˇáášáḠáá˝áá¸áś áĽáááŹ
behavior
Marquee
áá˛á
áááá¸áá˝áŹáˇááááŻáľá áľááŻá
ááá¸áá˝áá¸ááŻáááĄááźáá¸
ááŻáľáˇááŹáżáá á¸ááŤááá¸á áá°ááá˝áŹááŤáá˛á
value
áąááźááąááŹáś
scroll,
slide,
alternate
ááŻááżááŽáˇáżáá á¸ážáááŤááá¸á Scroll <marquee
behavior="scroll"
direction=âleftâ>Your
scrolling text goes here</marquee> Marquee áá˛á default value ááá¸áˇáżáá á¸ááŤááá¸á Slide <marquee
behavior="slide"
direction=âleftâ>Your
scrolling text goes here</marquee> ááŽ
value
ááąááŹáś
ááá¸ááá¸áá˛ááŻáááźáŹáˇáżááŽáˇáąááŹáś
drection
á
left
ááŻáááá¸
ááá¸ááá¸áĄááŻáľáˇáąááŹáá¸áá˛á
áĄáášááá¸áá˝áŹ ááá¸ááźáŹáˇááŤááá¸á Alternate <marquee behavior="alternate" direction=âleftâ>Your scrolling text goes here</marquee> áá°á ááá¸áżááḠááŹáżááḠááźáŹáˇááŹáá˛áżáá á¸ááá¸á direction
Marquee á áŹááŹáˇááŻá áĄáąáááąáĄáŹáḠááá¸áᏠááźáŹáˇááŻáááĄááźáḠááŻáľáˇááŹáżáá á¸ááá¸á Values: Left [DEFAULT] | Right | Down | Up <marquee direction=âleftâ>Your scrolling text goes here</marquee>
scrollamount
áąááźááášáŹáˇáąááá˛áá áŹááŹáˇáąááźáá˛á
áĄáżááá¸áááá¸áˇááŻáááá¸áá˝áá¸ááá¸
ááŻáááá¸áąááŹáś scrollamount ááŻáááŻáľáˇáąááˇáááŤááá¸á
Page 79 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET Values: Positive integer pixel amounts. <body> <marquee behavior="scroll" direction="left" scrollamount="1">Slow scroll speed</marquee> <marquee behavior="scroll" direction="left" scrollamount="10">Medium scroll speed</marquee> <marquee behavior="scroll" direction="left" scrollamount="20">Fast scroll speed</marquee> </body> áĄáąááá
áĽáááŹááŻá
á áá¸áˇážááá¸áśááŻááá¸ááŤá
scrollamount
attribute áá˛á value ááá¸ááŻááˇáášáŹáˇáąá speed áżááá¸áąáááŤáá˛á loop
ááŤááąááŹáś marquee áá˛á áááá¸áá˝áŹáˇáá áĄážáááá¸áĄáąááĄááźáá¸ááŤá <body> <marquee behavior="scroll" direction="left" loop="1">Scroll Loop</marquee> </body> áĄáąááá loop=â1â ááŻáááḠáá°ááá˛á áááá¸áá˝áŹáˇááá áá á¸ážáááá¸áᲠááŻáá¸áąááŹáá¸áżááŽáˇ áąáášáŹáá¸ááźáá¸ááźáŹáˇááŤáááá¸áśááḠâŚ
scrolldelay
áá˝áźáá¸áąááŹá¸ááŻáááá˛á
á áŹááŹáˇáá˛á
áĄáąáá˝áˇáĄáżááá¸ááŻá
ááŽ
scrolldelay
áá˛áááá¸áˇ ááá¸áá˝áá¸ááŻáááááŤááá¸á áąáĄáŹáá¸á፠áĽáááŹááŻá á áá¸áˇážááá¸áśááḠááŻááżááŽáˇááááŹááŤáááá¸áśááḠ.. <body> <marquee behavior="scroll" direction="left" scrolldelay="400">ScrollDelay</marquee> </body> áĄáąááááĄááŻááá¸áˇááŻáááá¸
á áŹááá¸áˇá
áá á¸áá á¸áżááá¸áˇ
ááźáŹáˇáąáááŤáááá¸áśááḠ.. scrolldealy áá˛á value ááŻá Millisecond áá˛áááŻááá¸áˇááŹááŤááá¸á <vspace>
ááŤáąááźááąááŹáś áĄááá¸áá˝áŹáąááŹá¸áżááá˛ááżááŽáˇááŤáżááŽá
<width> <height> Marquee áĄááźáḠááŻááá¸ááŻááḠá áá¸áˇááá¸ážááá¸áśááŻáá Code áąááˇáąááźááŤá Example: 1 <body> <marquee behavior="scroll" direction="right"><marquee
Page 80 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET behavior="scroll" direction="up">Up up and away!</marquee></marquee> </body>
áĄáąááá code áᏠá áŹááŹáˇáąááˇáąááźááŻá ááá¸áąá áŹáá¸áˇáąá áŹáá¸áˇáąáᡠááźáŹáˇáąáááŤáááá¸áśááá¸.. Exmaple: 2 <body> <marquee style="zindex:2;position:absolute;left:18px;top:97px;font-family:Cursive;fontsize:14pt;color:#ffcc00;height:200px;"scrollamount="3" direction="down">Scrolling text</marquee><marquee style="zindex:2;position:absolute;left:1px;top:89px;font-family:Cursive;fontsize:14pt;color:#FF8C48;height:100px;"scrollamount="7" direction="down">Falling text</marquee><marquee style="zindex:2;position:absolute;left:111px;top:7px;font-family:Cursive;fontsize:14pt;color:#ffcc00;height:302px;"scrollamount="4" direction="down">Scrolling text</marquee><marquee style="zindex:2;position:absolute;left:225px;top:83px;font-family:Cursive;fontsize:14pt;color:#FF8C48;height:435px;"scrollamount="3" direction="down">Falling text</marquee><marquee style="zindex:2;position:absolute;left:105px;top:53px;font-family:Cursive;fontsize:14pt;color:#ffcc00;height:432px;"scrollamount="2" direction="down">Scrolling text</marquee><marquee style="zindex:2;position:absolute;left:168px;top:69px;font-family:Cursive;fontsize:14pt;color:#FF8C48;height:369px;"scrollamount="1" direction="down">Falling text</marquee><marquee style="zindex:2;position:absolute;left:130px;top:117px;font-family:Cursive;fontsize:14pt;color:#ffcc00;height:289px;"scrollamount="7" direction="down">Scrolling text</marquee><marquee style="zindex:2;position:absolute;left:176px;top:57px;font-family:Cursive;font-
Page 81 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET size:14pt;color:#FF8C48;height:78px;"scrollamount="7" direction="down">Falling text</marquee><marquee style="zindex:2;position:absolute;left:16px;top:57px;font-family:Cursive;fontsize:14pt;color:#ffcc00;height:56px;"scrollamount="5" direction="down">Scrolling text</marquee><marquee style="zindex:2;position:absolute;left:300px;top:86px;font-family:Cursive;fontsize:14pt;color:#FF8C48;height:194px;"scrollamount="2" direction="down">Falling text</marquee><marquee style="zindex:2;position:absolute;left:292px;top:10px;font-family:Cursive;fontsize:14pt;color:#ffcc00;height:251px;"scrollamount="6" direction="down">Scrolling text</marquee><marquee style="zindex:2;position:absolute;left:278px;top:74px;font-family:Cursive;fontsize:14pt;color:#FF8C48;height:154px;"direction="down">Falling text</marquee><marquee style="zindex:2;position:absolute;left:241px;top:72px;font-family:Cursive;fontsize:14pt;color:#ffcc00;height:82px;"direction="down">Scrolling text</marquee><marquee style="zindex:2;position:absolute;left:276px;top:32px;font-family:Cursive;fontsize:14pt;color:#FF8C48;height:70px;"scrollamount="3" direction="down">Falling text</marquee><marquee style="zindex:2;position:absolute;left:272px;top:15px;font-family:Cursive;fontsize:14pt;color:#ffcc00;height:334px;"direction="down">Scrolling text</marquee><marquee style="zindex:2;position:absolute;left:90px;font-family:Cursive;fontsize:14pt;color:#FF8C48;height:167px;"scrollamount="7" direction="down">Falling text</marquee><marquee style="zindex:2;position:absolute;left:275px;top:108px;font-family:Cursive;font-
Page 82 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET size:14pt;color:#ffcc00;height:420px;"scrollamount="7" direction="down">Scrolling text</marquee><marquee style="zindex:2;position:absolute;left:22px;top:76px;font-family:Cursive;fontsize:14pt;color:#FF8C48;height:12px;"scrollamount="7" direction="down">Falling text</marquee><marquee style="zindex:2;position:absolute;left:89px;top:54px;font-family:Cursive;fontsize:14pt;color:#ffcc00;height:366px;"scrollamount="2" direction="down">Scrolling text</marquee><marquee style="zindex:2;position:absolute;left:26px;top:72px;font-family:Cursive;fontsize:14pt;color:#FF8C48;height:358px;"scrollamount="1" direction="down">Falling text</marquee><marquee style="zindex:2;position:absolute;left:3px;top:44px;font-family:Cursive;fontsize:14pt;color:#ffcc00;height:130px;"scrollamount="3" direction="down">Scrolling text</marquee> </body>
á áŹááŹáˇáąááˇáąááźááŻá áĄááá¸ááŻááá¸áąááˇáąááź áĄáąááŹáá¸áá˛á áášááŹáá˛áááŻáľááŤá <pre>
HTML áá˝áŹ ááááááŻááá¸ááá¸áśááŹáˇáá˛á ááŻáľá áľáĄááŻááá¸áˇ Browser áá˝áŹáąáááąá áášáá¸ááá¸ááŻáááḠ<pre> ááŻááá˛á tag ááŻáááŻáľáˇáąááˇáááŤááá¸á
<body> <pre> This is World Wide Myanmar Training Center WorldWideMyanmar's wholly owned by WorldWideMyanmar Sdn Bhd </pre>
Page 83 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET </body>
áĄáąááá á áŹááŹáˇáąááźááŻá <pre> ááŻááá˛á tag ááŻááááŻáľáˇáá˛áá˛á ááŹáˇááḠá áŹááŻáľáˇáąááźá áĄááá¸áˇááŻááḠáżáá á¸ááźáŹáˇááŤáááá¸áśááḠ⌠ááŤáąááá˛á Source Code áá˝áŹááŻááá¸ááŹáˇáá˛ááĄááŻááá¸áˇ áąáááąá áášáá¸ááá¸ááŻáááá¸áąááŹáś <pre> tag áąááˇááľáżááŽáˇááŻáľáˇááźáŹáˇáááŤááá¸á <center>
á áŹáąááźááŻá áĄááá¸áá˝áŹááŹáˇáášáá¸ááá¸ááŻáááá¸áąááŹáś <center>tag ááŻáááŻáľáˇáąááˇáááŤááá¸á
<body> <center> This is World Wide Myanmar Training Center, WorldWideMyanmar's wholly owned by WorldWideMyanmar Sdn Bhd </center> </body> <hr>
Horizontal Line áąááˇáá á¸ááŻááŹáˇáášáá¸ááá¸ááŻáááá¸áąááŹáś áᎠtag áąááˇááŻáááŻáľáˇááŤááá¸á
<hr> áá˝áŹ Closing Tag (</hr>) áá፠ááŤáá°áˇá
<hr width="30%" align="center" size="3" noshade color="#0000FF" /> ááŤááŻáááḠáĄáżááŹáąááŹáḠLine áąáᡠáá á¸áᯠBrowser áá˝áŹáżááá¸ááá˝áŹáżáá á¸ááá¸á noshade ááŻáááŹ
html
áá˝áŹááá°áˇáżááŹáˇáąááá˛á
xhtml
áá˝áŹáąááŹáś
3D
áááŻáá¸áá˛á
solid color
áąááˇááá¸áśááŹáá˛áżáá á¸ááá¸á
Page 84 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
<multicol>
DREAM IT, CODE IT BY PLANETCREATOR .NET
á áŹááŹáˇáąááźááŻá
áááá¸áˇá áŹ
á áŹáášáá¸áá˝áŹáá˛áááŻáá
multi-col
format
áá˛ááżááá¸áášáá¸ááá¸ááŻáááá¸áąááŹáś <multicol> ááŻáááŻáľáˇáąááˇáááŤááá¸á <multicol cols="3" width="80%" gutter="20"> This is multi-column layout text that should be distributed evenly across 3 columns </multicol> Cols ááŻááᏠColumn áĄáąááĄááźáá¸ááŻááąááŹá¸áżááżááŽáˇ gutter ááŻáááŹááąááŹáś columns áąááźáá˛á áĄááźáŹáĄáąážáˇááŻá Pixel áá˛áááŻáľáˇááŹááŤá
Block Formating áżááŽáˇáąááŹáś Character Formatting ááŤá á áŹááŹáˇ áĄáżááá¸áĄááá¸áá˛á ááá¸ááá¸áá˛ááĄááŻááá¸áˇ áąááźááŻá áĄááá áĽáŽáˇá áŹáˇáąááˇáá˛á tag áąááźáá˛á ááá¸ááá¸áá˛ááĄááŻááá¸áˇáąááŤáá á áŹááŹáˇáżááá¸ááá¸ááá¸ááŻááá˛á áąáááŹáá˝áŹ áá˝áźáá¸áąááŹá¸ááŻáááąááˇááŹáˇáá˛á á áŹááŹáˇáąááźááŻá ááŹááŹáá¸ááá¸ááŻááżááŽáˇáąááŹáś áąááááźáá¸áąáĄáŹáá¸á ááŻááżááŽáˇáąááŹáś áá˝áá¸áˇááá¸áˇáżááá¸ááŹáˇáąáĄáŹáḠáąááŹá¸áżááąááˇááŻáááĄááźáá¸ááŻá ááá¸ááźáá¸áˇááŤááá¸á áá°áá˝áŹ áĄáááááŻáľáˇáá˛á tag áąááźááŻááąááŹá¸áżááąááˇáááá¸ááŻáááá¸áąááŹáś -
<Abbr> <Cite> <Font> <Q> <Spell> <Sup>
<B> <Code> <I> <S> <Strike> <Tt>
<Big> <Dfn> <Inlineinput> <Samp> <Strong> <U>
tag
áá˝áá¸áˇááá¸áˇáášáḠáá˝áá¸áś áĽáááŹ
<abbr>
Abbreviation
áá˛á
<Blink> <Em> <Kbd> <Small> <Sub> <Var>
áĄááŻááąááŹáá¸ááŤáá˛á
á áŹáąážááŹáá¸áˇáá á¸ááŻááá¸áˇáá˝áŹ
á áŹááŻáľáˇáá á¸ááŻáľáˇá
á áŹááŻáá¸áá á¸ááŻáá˛á áĄáááá¸áŤáá¸ááŻá ááźáá¸áśááŻáááá¸ááŻáááḠááá¸áˇá áŹááŹáˇáá˝áŹ Pointer áąááŹáá¸ááŻááá¸áżááŽááŻáááŹáá˛á tooltip text ááŻáááŻáľá áľáąááŹá¸áżááąááˇááŹááŤá Send by <abbr title="facsimile">fax</abbr> áĄáąáááá˝áŹááŻáááá¸
fax ááŻááá˛á á áŹááŻááąááˇááŻá
áąááŹá¸áżáááŹáˇáżááŽáˇáąááŹáś
ááá¸áˇáĄáąáááá˝áŹ pointer
áąááŹáá¸ááŻááá¸áá˝ facsimile ááŻááżááŽáˇáąááŹá¸áżááąááˇááŹááŤá <cite>
Citation text ááŻáááąááááŤááá¸.. áááá¸áˇáĄáŹáˇáżááá¸áś áášáá¸áˇááŻááˇá ááŻááˇááŹáˇáášáḠáąááźáá˝áŹááŻáľáˇááŤááá¸á
<cite>citation text</cite>
Page 85 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS <font>
DREAM IT, CODE IT BY PLANETCREATOR .NET
HTML áá˝áŹáĄááŻáľáˇáášáŹáˇááᲠtag áá á¸ááŻááá¸áˇáżáá á¸ááŤááá¸á font áá˛á áĄáášáłááˇáĄá áŹáˇá áĄááźáá¸áĄá áŹáˇáá˛á ááŻáľá áľáąááźááᯠááá¸áá˝áá¸áá˛ááąáááŹáá˝áŹ áᎠtag ááŻáááŻáľáˇááŤááá¸á áá°ááá˝áŹááŻáľáˇáá˛á attribute áąááźááąááŹáś color, face, font-weight, point-size, size áąááźáá˛áżáá á¸ááá¸á attribute
áá˝áá¸áˇááá¸áˇáášáá¸áá˝áá¸áś áĽáááŹ
color
áąááˇááŹáˇááŹáˇáá˛á font áá˛á áĄáąááŹáá¸ááŻá ááá¸áśááźáá¸áˇááá¸áá˝áá¸ááá¸ááŻáááá¸áąááŹáś color
attribute
ááŻáááŻáľáˇáąááˇáááŤááá¸á
color
áá˝áŹááŻáááá¸
áĄáąááá
áá˝áá¸áˇááá¸áˇáá˛ááá˛ááĄááŻááá¸áˇ color name áá˛á hex color áąááźááŻáááŻáľáˇááŻáááááŤááá¸á
<font color="#0000FF">The COLOR attribute offers a GREAT alternative way to create visually distinct text/section markers in long runs of text</font> face
Font áá˛á áĄáášáłááˇáĄá áŹáˇááŻááąááŹá¸áżáááá¸ááŻáááḠááŻáľáˇááŹáżáá á¸ááá¸á Times, Arial á ááá¸áżáá á¸áąááŤáá
<font face="Verdana">This is Verdana</font><br/> <font face="Times">This is Times</font><br/> <font face="Arial">This is Arial</font><br/> <font face="Zawgyi One">ááŤá ZawGyi Font ááŤ</font><br/> <font face="Times, Verdana, System">Font Selection</font> áąááˇááŹáˇáá˛ááąáááŹáá˝áŹ
value
áąáááŹáá˝áŹ
font
áá˛á
áĄáášáłááˇáĄááá¸áąááźááŻá
ááŻááá¸ááŻááá¸áąááˇááŹáˇááŻáááááŤááá¸á
Page 86 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
áĄáąáá code áá˛á áąáĄáŹáá¸ááŻáľáˇá áĄááŻááá¸áˇáá˝áŹ âTimes, Verdana, Systemâ ááŻááżááŽáˇáąááˇááŹáˇááŹáˇááŹááŻá áąááźááááŤáááá¸áśááḠ⌠ááŻáááŻááá˛á áĄáááá¸áŤáá¸ááąááŹáś Times ááŻááá˛á font ááŻá áĽáŽáˇá áŹáˇáąááˇáżááŽáˇ ááźáá¸áˇááŤááá¸.. Times ááŻááá˛á font á áááááá˛á ááźáá¸áášá´ááŹáá˝áŹ ááá˝ááá˝ verdana ááŻá ááŻááá áĽáŽáˇá áŹáˇáąááˇáĄáąááá˛á áąáżááŹááŤááá¸á áĄááá¸á áĄááá¸á፠font áąááź ááá˝ááá°áˇáááŻáá˝ system ááŻááżááŽáˇ browser
áá˛á
default
font
ááŻááąáżááŹááŤááá¸..
browser
áááá¸áˇ
ááááá áá¸áá˛áá˝áŹ áá˝ááá˛á font áąááźáá˛ááᲠááá¸áśááŹáżáá á¸ááá¸á font-weight
Font áá˛á áĄáá°áˇáĄááŤáˇááŻáááá˛áąáżááŹááá˝áŹáąááŤáá font-weight áá˛á value áášáŹáˇáąá ááŻááżááŽáˇ bold áżáá á¸áąááá˛á font-weight áá˛á value áąááźááąááŹáś Values: 100 | 200 | 300 | 400 [DEFAULT]| 500 | 600 | 700 [Font áá˛á Bold ááŤ] | 800 | 900
<font font-weight=700>This is font weight</font><br/> point-size
Font áá˛á áĄááźáá¸áĄá áŹáˇááŻáááá¸áá˝áá¸ááá¸ááŻáááá¸ááŻáľáˇááŤááá¸á
<font point-size=â20â>This is font size 20</font><br/> size
size áá˛á point-size áá˛áááŻá ááąááŹááŤáá˛á.. size ááŻááᏠ1 ááąá 7 áĄáááá˝ááá˛á predefined size ááŻáááá¸áá˝áá¸ááŹáżáá á¸ááá¸á
<font size="1">size 1</font><br/>
Page 87 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET <font size="2">size 2</font><br/> <font size="3">size 3</font><br/> <font size="4">size 4</font><br/> <font size="5">size 5</font><br/> <font size="6">size 6</font><br/> <font size="7">size 7</font><br/> ááŤááŻáááḠáĄáąááá ááŻáľáĄááŻááá¸áˇáżááá¸áááŤááááśá¸ááá¸âŚ áá°áááŻá áąáĄáŹáá¸ááŤáĄááŻááá¸áˇ ááŻáľáˇááŻáááááŤááá¸á
<font size=â+2â>This is font weight</font><br/> <font size=â-6â>This is font weight</font> ááŤááŻá + / - áá˛áááá¸áá˝áá¸ááŻáááááŤááá¸á áá°ááá˛á Default Value á 3 áżáá á¸áá˛ááĄááźáá¸
-5
ááŻáááá¸
2
áá˛ááá°ááŹáąááŤáá
+1
ááŻáááá¸
4
áá˛á
áĄááźáá¸áĄá áŹáˇáá°ááŤáááá¸áśááḠ..
<q>
Quotations mark áąááˇááá¸áśáąááˇááŹááŤáá˛á ââŚâ
<q cite="http://www.worldwidemyanmar.com/">To be or not to be.</q> <spell>
ááŽ
tag
ááąááŹáś
áąááŹá¸áąááŹá¸áąááˇáĄááŻáľáˇááá¸áˇááŤááá¸âŚ Reference
áąááŹá¸áąááŹá¸áášáŹáˇáášáŹáˇáá˝áŹááá¸áˇ
áąááˇááŹáˇááŹáˇáᏠááá˝ááąááŹáśááŤáá°áˇá áá°ááąááŹáś Netscape Mail or Composer editor
áąááźáá˝áŹ
á áŹááŻáľáˇáĄáá˝áŹáˇááŻááąááŹá¸áżááąááˇááŹáżáá á¸ááŤááá¸á <sup>
Superscripted ááŻáááąááááŤááá¸á á áŹááŻáľáˇááŻá áĄáąáááááŻá ááá¸ááźáá¸áˇááá¸ááá¸ááŻáááḠááŻáľáˇááŤááá¸á
2 ááŻá 2 ááá¸ááźáá¸áˇ ááá¸ááŹáˇááŹááŤá
<body> <center><h2>SuperScripted Text</h2><hr> 2<sup>2</sup>=
4
áżáá á¸ááŤááá¸á
áá á¸âá¸ááá¸áˇáĄáżááá¸áś
á
á
áá˝á á¸ááá¸ááá¸
á
áżáá á¸áá</center> </body>
<b>
Page 88 of 197
á áŹááŹáˇáá á¸ááŻááŻá Bold ááá¸áśáášáá¸ááá¸ááŻáááá¸áąááŹáś <b> tag ááŻáááŻáľáˇáąááˇáááŤááá¸á
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<b>This is Bold Text</b> <code>
HTML
áá˝áŹ
áá á¸áášáłáá
Coding
áąááźáĄááźáá¸
Character Entities
áąááźáąáżááŹáá¸áˇáżááŽáˇááá¸áśááŻááááŻáááŹ
áááźáá¸áá°ááŤáá°áˇ ááŽáĄááźáḠááŽááŻá Code áąááźáĄáŹáˇááŻáľáˇááŻá <code> ááŻááá˛á tag áá˛áá˝áŹááŹáˇááḠBrowser á áᎠcode ááááá¸áˇáĄááŻááá¸áˇ áąááŹá¸áżááąááˇááŤáááá¸áśááá¸âŚ
<code>This is Greater Than > and Less Than < </code> <
áá˛á
>
áąááźá
Source
ááŻááżááŽáˇááŻááá¸ááá¸áśáááŤááá¸á
Code
ááŤáąááá˛á
áá˝áŹ
ááŽáĄááŻááá¸áˇááŻááá¸ááá¸áśááŻááááąááááŤáá°áˇá
<code>
tag
&lt; or &gt;
áá˛áá˝áŹááá¸áśááŹáˇááá¸áąááŹáś
áá°ááá˛á
ááááá¸áˇáĄááŻááá¸áˇáąááááŤááá¸á
<i>
Page 89 of 197
á áŹááŻáľáˇáĄáąá áŹáá¸áˇáąááˇáąááźáá˛á áąáááášáá¸ááá¸ááŻáááḠáᎠ<i> tag ááŻáááŻáľáˇáąááˇáááŤááá¸á
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<i>This is Italicied Text </i> <s> <strike>
á áŹááŻáľáˇáąááźááŻá áĄááá¸ááąá áżááá¸áášáĽá¸áˇááŹáˇ áá˛áááŻáľá áľ ááŻáá¸áášáá¸ááá¸ááŻáááḠááŻáľáˇááŤááá¸.. ááŤááŻá strike ááŻáááąááááŤááá¸.. strike ááŻá <s> ááŻáááááŻáḠ<strike> ááŻááżááŽáˇáąááˇááŹáˇááŻáááááŤááá¸á
<body> <strike>strikethrough text</strike><br/> <s>strikethrough text</s> </body> <tt>
Text áąááźááŻá fixed-width font áĄáżáá á¸ááŻáľáˇááŹááŤá Tele Type Text ááŻáľáˇááá¸ááŻáááąááááá¸á
ááŻáľáá˝áḠfont á፠<tt> tag ááŻá ááŻáľáˇááŹáˇáá˛á ááŹááŤá
<body>Fixed-width text<br/> <tt>Fixed-width text</tt>
Page 90 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
</body> <big>
ááŻáľáá˝áḠfont áĄáášáłááˇáĄá áŹáˇááŤáᲠ.. ááŤáąááá˛á áá°á ááááááŹáąáᡠááŻááżááŽáˇážááŽáˇááŤááá¸á
ááŻáľáá˝áḠfont á፠<big> tag ááŻá ááŻáľáˇááŹáˇáá˛á ááŹááŤá <body> Big Text <br/> <big>Big Text</big> </body> <dfn>
á áŹááŹáˇáá á¸ááŻáá˛á
áĄáááá¸áŤáá¸ááŻá
Define
ááŻáá¸ááŹáżáá á¸ááá¸á
áá°á
definition
term
ááŻááááá¸áˇáąááááŤááá¸á
Definition Term <body> This is <dfn>defining text</dfn> by WWM </body> <samp>
Sample ááŻáááąááááŤááá¸á Sample áąááˇááŻááá˛á á áŹááŹáˇáąááźááŻá áĄá áŽáĄá áĽá¸áášááš ááŻááˇáá˝áá¸áˇá áźáŹ áąááŹá¸áżááášáá¸ááá¸ááŻáááá¸ááŻáľáˇááŤááá¸á
Sample
<samp>sample text</samp>
Page 91 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS <strong>
DREAM IT, CODE IT BY PLANETCREATOR .NET
áĄáąááˇáĄááá¸áąáżááŹážááŹáˇááŻááá˛á á áŹá ááŹáˇááŻá ááá¸ááá¸áá˝áŹáˇáá˝áŹáˇáżáááŻáááĄááźáá¸ááŻáľáˇááŤááá¸á áá°ááąááŹáś Bold Text ááŻáááŤáá˛á
Strong Text <body> This is <strong>strong text</strong>. </body> <u>
á áŹáąážááŹáá¸áˇáąááźáá˛á áąáĄáŹáá¸áá˝áŹ Line ááŹáˇááŹáá˛áżáá á¸ááá¸á
Underlined Text <body> This is <u>Underlined text</u>. </body> <blink>
á áŹáąááˇáąááźááŻá áá˝ááá¸ááŻáá¸áḠááźáá¸áśááŻááá¸ááŻáľá áľááŻáá¸áášáá¸ááá¸ááŻáááḠáᎠBlink tag ááŻáááŻáľáˇááŤááá¸á
<body> This is <blink>blinking text</blink>. </body> <em>
á áŹááŹáˇáąááźááŻá
áá˝áá¸áˇááá¸áˇáąáĄáŹáá¸áąááŹá¸áżáááŻááá¸ááŻáááĄááźáá¸
áąááŹá¸áżááąááˇááŤááá¸á
ááŻáááŻáááŹá
ááŽ
tag
<em>
tag
áá˛ááąááˇááŹáˇáá˛ááĄááźáá¸
á
italic
ááŻáľá áľáąááˇáąááźáá˛á
ááŽáĄáá˛á
á áŹááŹáˇáąááźá
áĄáąááˇážááŽáˇááá¸âŚ ááŻááżááŽáˇáĄáąááˇááŹáˇá áźáŹ ááá¸ááá¸áśáąážááŹáá¸áˇ user áąááźááŻá áżááá¸ááŹáąáĄáŹáḠááŻáá¸áąááˇáᏠáá˛áżáá á¸ááá¸á
Page 92 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<body> <p>Do you <em>really</em> need to buy those expensive jeans? I mean, is it really <em>that</em> important to you to look like some kind of circus freak?</p> </body> <kbd>
user áá á¸áąááŹáá¸á Keyboard ááąááżááŽáˇ Delete Key áá á¸ááŻááŻá ááŻááá¸ááá¸áśáąááˇááŻáá áąáżááŹáášáá¸ááá¸.. Alt Key
ááŻáááŻááá¸ááá¸áśáąááˇááŻáááąáżááŹáášáá¸ááá¸ááŻáááá¸á
áá á¸ááá¸áˇáĄáŹáˇáżááá¸áś
Keystrokes
áąááźáąááŹá¸áżááášáá¸ááá¸
ááŻáááá¸ááŻáľáˇááŤááá¸á
<body> <p>Hold down <kbd>CTRL</kbd>, <kbd>ALT</kbd>, and <kbd>DELETE</kbd>, then select Task Manager</p> </body> <small>
á áŹááŻáľáˇáĄáąááˇáá˛ááąááŹá¸áżáááŹáá˛áżáá á¸ááá¸á áá°ááá˛á ááŻáľá áľá size 1 to 7 ááŻááĄáąáżáááľááŹáżáá á¸áżááŽáˇ one size decrement áąááŤá⌠áĽáááŹááŻá ážáááśá¸ááá¸ááŻáááḠeveryon OK for a drink ááŻááá˛á á áŹááŹáˇááŻá <small> tag áá˝á á¸á፠ááá¸ááŻááá¸áá˛ááĄááźáḠáá°á áąáá˝áá text áąááźááḠtwo size decrement áżáá á¸ááźáŹáˇááŹáąááŤáá
Page 93 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<body> <p>Mark tried to get out of buying a round of drinks by getting progressively quieter as he talked: "Right, I'm off to stretch my legs and then get a bag of peanuts ... <small>back in a minute ... <small>everyone OK for a drink?</small></small></p> </body> <sub>
Subscript ááá¸áá˝áá¸ááŻáááĄááźáá¸ááŻáľáˇááŹáá˛áżáá á¸ááá¸á Subscript ááŻááᏠH2O ááŻáážáááŤááŻá ááŤááŻá H2O ááŻááżááŽáˇ 2 ááŻá áąáĄáŹáá¸ááᯠáá˛áá˛áááá¸áśáášáżááŽáˇáąááˇááŹáˇááá¸ááŻáááḠááŻáľáˇááŹáá˛áżáá á¸ááá¸á áá˝áá¸áááźáá¸ááŤááá¸.. Superscript ááŻáááḠáĄáąááááŻáááá¸ááá¸.. <sup> ááŻáááąááˇááá¸âŚ áĄáᯠSubscript ááŻáááŹá áąáĄáŹáá¸ááŻááá¸áˇááŻá áášáżááŽáˇáąááˇááá¸âŚ áá°áááŻá <sub> ááŻááżááŽáˇáąááˇááŹáˇááŤááá¸á
<body> <p>That's not just water. That's not just H<sub>2</sub>O. That's H<sub>2</sub>-woah!</p> </body> <var>
Page 94 of 197
Variable áĄááá¸áášáŹáˇááŻá áąááŹá¸áżáááŻááá˝ášáḠááŻáľáˇááŤááá¸á
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<body> <p>To get access to the system you first need to enter your username, e.g. <var>monkeyboy123</var>, followed by your unique 6-digit customer ID beginning with C, e.g. <var>C13345</var>.</p> </body>
Embedded Functionality áĄááŻááá¸áˇáá˛áżáá á¸ááá¸á HTML áá˝áŹ Java applications, scripting functionality, Plug-ins á ááá¸ááŻááááŻá áĄááŻáľáˇáżááłááŻáááĄááźáḠáá˛áżáá á¸ááŤááá¸á ááŽáĄááŻááá¸áˇáá˝áŹ -
<Embed> <Noembed>
<Script> <Noscript> <Iframe>
<Applet> <Param>
áąááźááŤážáá¸ááá¸á Tag
áá˝áá¸áˇááá¸áˇáášáḠáá˝áá¸áś áĽáááŹ
<embed>
alternative content áá˝áźáá¸áąááŹá¸ááŻáááá˝áŹ
áá˝ááá˛á
áąááźááŻá web browser áá˝áŹáżááá¸ááąáĄáŹáá¸âŚ áá á¸ááá¸áˇáĄáŹáˇáżááá¸áś flash video
áąááźááŻááášáłááˇ
á
multimedia content
áąááźáĄááźáá¸áĄááŻáľáˇáżááłááŤááá¸á áĄááŻáľáˇáżááłááŻáľááąááŹáś áąáĄáŹáá¸ááŤáĄááŻááá¸áˇááŤá áąááˇááŹáˇáá áĽáááŹ<embed alt="string" height=" { number | percentage } " hidden=" { true | false } " pluginspage="uri" src="uri" type="MIME type" width="number">
Page 95 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET </embed>
<body><h2>This is Embed, Object, Param</h2> <object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/U7qKojFKD5g?fs=1&amp;hl=en_US"></param> <param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/U7qKojFKD5g?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object> </body>
áĄáąááá ááŻáľááąááŹáś Youtube á ááŽááŽááŻáááŻá embed tag áá˛ááá°áżááŽáˇááŻáľáˇááŹáˇááŹááŤá <noembed>
áá°ááąááŹáś- áĄááá¸á áá˝áźáá¸áąááŹá¸ááŻáááá˛á browser á embed ááŻáá¸ááŹáˇáá˛á content áąááźááŻá
ááááá°áˇááŻáááá¸
(Support
áááŻáá¸áá°áˇááŻáááá¸)
<noembed>
tag
ááŻáááŻáľáˇáąááˇáááŤááá¸á <embed src="http://www.worldwidemyanmar.com/sounds/sound.mid" height="50" width="75"> </embed> <noembed> <b>Please>/b> try this <a href="http://www.worldwidemyanmar.com/sounds/sound.mid">media clip</a> </noembed>
áĄáąááá Code ááŻáážáááśá¸ááá¸ááŻáááḠembed ááŻá support áááŻáá¸áá˛á browser áąááźáĄááźáá¸
Page 96 of 197
Please
trying
this
media
clip
ááŻááá˛ááąáááŹáá˝áŹ
link
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
áąááˇááźáŹáˇáá˝áŹáżáá á¸ááŤááá¸á
support
ááŻáá¸ááá¸áąááŹáś
áąáĄáŹáá¸á
noembed
á
ááąááááŹááŤáá°áˇá <script>
áᎠtag ááŻá áá˝áźáá¸áąááŹá¸ááŻáá áĄáąááá head element áĄááŻááá¸áˇáá˝áŹ áá á¸ááŤááá¸áśááźáá¸áˇ áżááŽáˇááźáŹáˇááŤáżááŽâŚ script ááŻáááąáżááŹááḠjavascript ááŻááá˛áąáżááˇáżááá¸ážáááŤáááá¸áśááḠ⌠html áá˝áŹ javascript ááŻá áąááŹá¸áąááŹá¸áášáŹáˇáášáŹáˇááŻáľáˇážáááŤááḠ⌠ááŻáááŻáááŹá html áá á¸ááŻááá¸áˇáá˛á professional webpage áá á¸áᯠááá¸áąááŹáá¸ááŻááááŻáááŹáááźáá¸áá°áá°áˇáąá.. ááŤáąážááŹáá¸áś function
áášáłááˇá áŻáľááŻáľáˇááŻááá¸áąáĄáŹáá¸á
input validation
áąááź
filtering
ááŻáá¸ááŻááá¸áąáĄáŹáá¸
á ááá¸áśááŻáá¸ááá¸áˇáášáłááˇáąááźáá˝áŹ ááŽááŻá script áąááźá server side áĄáá ááąááŹáá¸áᲠclient side
áá˝áŹááá¸
á á á¸ááźáŹáˇááŻáááááŤááá¸á
ááŽááŻáá á á¸ááŻááá¸áżááá¸áˇáĄáŹáˇáżááá¸áś
html
rendering
ááŻáááŻááżááá¸ááá¸áąá ááŤááá¸á
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Embeded Funtionality by WWM</title> <script language="JavaScript" type="text/javascript"> <!-- hide script from old browsers function getname(str) { alert("Hi, "+ str + "!"); } // end hiding contents --> </script> </head> <body> Please enter your name: <form> <input type="text" name="name" onblur="getname(this.value)" value="" /> </form>
Page 97 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET </body> </html>
áá°ááá˛á attribute áĄáášáłááááąááŹáś attribute
áá˝áá¸áˇááá¸áˇáášáḠáá˝áá¸áś áĽáááŹ
language
áá˝áźáá¸áąááŹá¸ááŻáááąááˇááŹáˇááŻááá¸áá˛á
Language
á
ááŹáĄáášáłááˇáĄá áŹáˇáá˛
ááŻááᏠáąáżááŹážááŹáˇáąááˇáááŹáżáá á¸ááá¸á áĄááŻáľáˇáášáŹáˇáá˛á value ááąááŹáś JavaScript and VBScript áąááźáá˛áżáá á¸ááŤááá¸á <script language="JavaScript"
type
scripting code áá˛á MMIE Type ááŻááąáżááŹááŹá፠<script type="text/javascript"
<noscript>
áĄáąááá embed áá˛á noembed ááŻáááŤáá˛.. script ááŻá browser á support áááŻáá¸ááḠáĄááŻáľáˇáżááłááŹáá˛áżáá á¸ááá¸á <script language="JavaScript"> <!-- document.write("Hello World.") --> </script> <noscript> <b>Please</b> try this page for browsers that can not handle SCRIPTing. <a href="http://www.worldwidemyanmar.com/alternate.html">Simple Text Page</a> </noscript>
<iframe>
áĄáżááŹáˇáąááŹ
Website,
Web
page
áá á¸ááŻááŻá
ááá¸áá˝á
web
page
áá˛áá˝áŹ
áąáááá°ááŻáľáˇá áźá˛ááá¸ááŻáááḠiframe ááŻáááŹááŻáááŻáľáˇáąááˇáááŤááá¸á
<iframe src="http://www.google.com/" height="500" width="100%" frameborder=â1â> </iframe>
frameborder
=
â1â
ááŻáááŹ
áąááˇááŹáˇá
áąááŹáá¸ááŻááąáżááŹááŹááŤá
áĄááá¸á
frameborder = â0â ááŹáˇááá¸ááŻáááḠáąááˇáąááŹáá¸ááŻá áżááá¸ááá˝áŹáááŻáá¸ááŤáá°áˇá
Page 98 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
ááŤáąááˇááąááŹáś iframe áá˛á áĄááŻáľáˇáżááłáá ááŻáľá áľááŤ- Syntax <iframe align=" { bottom | left | middle | right | top } " frameborder=" { 0 | 1 } " height=" { number | percentage } " longdesc="string" marginheight="number" marginwidth="number" name="string" noresize="noresize" scrolling=" { auto | no | yes } " src="uri" width=" { number | percentage } "> </iframe>
<applet>
Webpage áá á¸ááŻáá˝áŹ java application ááá¸áąááź ááá¸áśááźáá¸áˇ áĄááŻáľáˇáżááłááá¸ááŻáááḠáᎠtag ááŻááĄááŻáľáˇáżááłážáááŤááá¸á <applet archive="uri" code="uri" codebase="uri" height=" { number | percentage } "width=" { number | percentage } "> </applet>
Example <applet codebase="http://www.worldwidemyanmar.com/java/" code="javaexample.class" width="200" height="300"> <param name="text1" value="Example Text 1" /> <param name="imagecaption" value="Image Caption" /> <param name="bounceimage" value="bounce1.gif" /> <img src="non_java_image.gif" width="200" height="300" border="0" alt="You are missing the full Java Experience."> </applet>
<param>
Applet áá˛á Object áąááźáá˛á áąááŤáá¸áˇá áá¸áĄááŻáľáˇáżááłáᏠáżáá á¸áżááŽáˇ parameters or variables áĄááŻáľáˇáżááłááŻááááąáĄáŹáá¸ááá¸áˇáżáá á¸ááŤááá¸á áá°ááá˛á áĄááá ááá¸ááźáá¸áášáá¸áąááŹáś áĄáąááá Applet áá˛á Object áąááźáĄááŻááá¸áˇáᲠJava applet (a mini application ) áąááźááŻá browser áá˝áŹ áĄááŻáľáˇááŻáááĄááźáḠááŻáľáˇážááŹááŹáżáá á¸ááŤááá¸á Usage-: <param name="string" type="MIME type" value="value"valuetype=" { data | object | ref } ">
Applet áá˝áá¸áśááźá˛á ááŻáľáˇááŻáľ <applet codebase="http://www.worldwidemyanmar.com/java/" code="javaexample.class" width="200" height="300"> <param name="text1" value="Example Text 1" /> <param name="imagecaption" value="Image Caption" /> <param name="bounceimage" value="bounce1.gif" />
Page 99 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET <img src="non_java_image.gif" width="200" height="300" border="0" alt="You are missing the full Java Experience."> </applet>
Object áá˝áá¸áśááźá˛á ááŻáľáˇááŻáľ <object codetype="application/java-vm" codebase="http://www.worldwidemyanmar.com/applet.class" classid="java:program.start" height="100" width="100"> <param name="options" value="xqz" /> If you can read this you are too close.<br /> AND your browser does not support Java. </object>
Revision Control áá˛áżáá á¸ááá¸á áá˝áźáá¸áąááŹá¸ááŻáá ááá¸áśááŹáˇáá˛á á áŹááŹáˇáąááź update ááŻáá¸ááŹáˇáá˛á áĄáąážááŹáá¸áˇáĄáᏠcontent áąááźááŻá ááŽáˇááá¸á ááźá˛áżááŹáˇáżááŽáˇáąááŹá¸áżááášáá¸ááá¸ááŻáááḠáĄááŻáľáˇáżááłááŻáááĄááźáá¸áżáá á¸ááá¸á
ááŽáąáááŹáá˝áŹ ááŤážáá¸áá˛á tag ááąááŹáś áá˝á á¸ááŻááá¸áˇá፠<del> áá˛á <ins> áá˛áżáá á¸ááá¸á Tag
áá˝áá¸áˇááá¸áˇáášáá¸áá˝áá¸áś áĽáááŹ
<del>
Delete ááŻáá¸ááŹáˇáá˛á á áŹááŹáˇ áá á¸ááŻáá˛á áąááááá¸á áĄáášááá¸áąááźááŻá ááá¸áá˝áá¸ááŻáááĄááźáḠááŻáľáˇááŤááá¸á <del cite="#oct12-2010" datetime="2010-10-12T12:45:00PST">Deleted text</del>
<ins>
ááá¸áśááźáá¸áˇááŹáˇáá˛á á áŹááŹáˇ áá á¸ááŻáá˛á áąááááá¸á áĄáášááá¸áąááźááŻá ááá¸áá˝áá¸ááŻáááĄááźáḠááŻáľáˇááŤááá¸á <ins cite="#jan25-2009" datetime="2009-01-25T18:00:00PST">Inserted text</ins>
áĽáááŹ-
Delete ááŻáá¸ááŹáˇáá˛á Text á áĄááá¸áá˝áŹ áżááá¸áášáĽá¸áˇáąááˇáá á¸ááŻáąáááżááŽáˇáąááŹáś Insert ááŻáá¸ááŹáˇáá˛á
Text
ááąááŹáś
áąáĄáŹáá¸á
áááŻáá¸áˇáąááˇáá á¸ááŻááŹáˇááŹáˇááŹ
áąááźááááŤáááá¸áśááá¸âŚ
Page 100 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<body> <del
cite="#oct12-2010"
datetime="2010-10-12T12:45:00PST">Deleted
cite="#jan25-2009"
datetime="2009-01-25T18:00:00PST">Inserted
text</del> <br/> <br/> <ins
text</ins> </body>
Ruby Elements ááŻáááá˛áąááááŤááá¸á áĄááááĄáŹáˇáżááá¸áś East Asian Languages (Japanese, Chinese, Korean, áá˛á á ááá¸ááŻááááŻá áąááŹá¸áżáááŻááá˛ááĄá፠áĄááŻáľáˇáżááłááŤááá¸á Ruby áá˝áŹááŻáľáˇáá˛á áĄááá tag ááąááŹáś Parent tag áżáá á¸áá˛á <ruby> áá˛á <rb><rt> ááŻáááá˛áżáá á¸ážáááŤááá¸á áá˝áá¸áášáá¸- Ruby á Browser áąááŹá¸áąááŹá¸áášáŹáˇáášáŹáˇáá˛á áĄááá¸ááąáżáááŤáá°áˇá Tag
áá˝áá¸áˇááá¸áˇáášáḠáá˝áá¸áś áĽáááŹ
<ruby>
áá°ááąááŹáś ruby element áĄááźáḠáĄáááááŻáľáˇáá˛á parent tag áá˛áżáá á¸ááŤááá¸á
Page 101 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
Support ááŻáá¸áá˛á IE áá˝áŹááŻáľáˇááŹáˇááŹáżáá á¸ááŤááá¸á Firefox áá˝áŹáąááŹáś Support áááŻáá¸ááŤáá°áˇá
<ruby> <rb>厜螺ĺć</rb> <rt>liaison</rt> </ruby>
<rb>
Ruby Base ááŤá áá˝áźáá¸áąááŹá¸ááŻáááąááˇááŹáˇááŻááá¸áá˛á east asian language
(Base
Language) áąááź áĄááźáá¸ááŻáľáˇááŤááá¸á <ruby> <rb>厜螺ĺć</rb> <rt>liaison</rt> </ruby>
<rt>
Ruby Text ááŻáááąááááŤááá¸.. <ruby> <rb>厜螺ĺć</rb> <rt>liaison</rt> </ruby>
<rbc>
Ruby Base Container ááŻáááąááááŤááá¸á Container ááŻáááŹááąááŹáś <rb> content áąááźááŻá ááá¸áśááźáá¸áˇááŹáˇááŹáżáá á¸ááŤááá¸á <ruby> <rbc>
Page 102 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET <rb>ć</rb> <rb>č¤</rb> <rb>俥</rb> <rb>çˇ</rb> </rbc> </ruby>
<rtc>
Ruby Text Container
ááŻáááąááááŤááá¸á
áá°áááá¸áˇ
<rt> content
áąááźááŻá
áááá¸áˇáááá¸áˇááŹáˇááŹáá˛áżáá á¸ááŤááá¸á <ruby> <rtc class="reading"> <rt>ăă</rt> <rt>ă¨ă</rt> <rt>ăŽăś</rt> <rt>ă</rt> </rtc> <rtc class="annotation"> <rt rbspan="4" xml:lang="en">W3C Associate
Chairman</rt>
</rtc> </ruby>
áĽáááŹ
ááŤááąááŹáś
Complex Ruby
áąááŤáâŚ
áá°á
<ruby>,<rtc><rbc><rb><rt>
áĄáŹáˇááŻáľáˇááŻá áąááŤáá¸áˇáżááŽáˇáąááˇáżáááŹáˇááŤááá¸á Ruby
á
áĄááŻáááŤ
East Asian Language
áąááźááŻá
áąááŹá¸áżáááŻááá˛ááĄááŤáá˝áŹ
áĄááźáá¸ááŻáááá¸áśáąááŹá¸ááŤááḠâŚ
ááááááŻáá
áĄááŻáľáˇáżááłáá˛á
browser
áĄáąáááá˝áŹááááá¸áżááŽáˇáąááŹáś
structure
áąááˇáąááź
ááźá˛áżááŹáˇááźáŹáˇááŤáááá¸áśááḠ..
Page 103 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<ruby xml:lang="ja"> <rbc> <rb>ć</rb> <rb>č¤</rb> <rb>俥</rb> <rb>çˇ</rb> </rbc> <rtc class="reading"> <rt>ăă</rt> <rt>ă¨ă</rt> <rt>ăŽăś</rt> <rt>ă</rt> </rtc> <rtc class="annotation"> <rt rbspan="4" xml:lang="en">W3C Associate Chairman</rt> </rtc> </ruby>
<frameset > Elements
HTML áá˛á Root Elements áĄááźáá¸áˇáá˝áŹ <head> áá˛á <body> áąááźáĄáżááḠ<frameset> ááŻááá˛á Element áá á¸ááŻááá¸áˇáášáá¸ááŤáąááˇááḠ⌠áĄáá¸ááŹááḠá áŹáášáá¸áá˝áŹáąááźááŻá Page áá á¸ááŻááá¸áˇáá˝áŹ áĄááŻááá¸áˇááŻááá¸ááźá˛áżááŽáˇáąááŹá¸áżááášáá¸ááá¸ááŻáááḠframeset ááŻáááŻáľáˇáąááˇáááŤááá¸á frameset á áĄááŻáľáˇááá¸áˇááá¸ááŻááąááá˛á áĄááŻáĄáášááá¸áĄáá ááŻáľáˇáąáááá˛á webpage áąááź áá˝áááŤáąááˇááá¸á
Page 104 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
áĄáąááá ááŻáľáá˝áŹááŻáááḠáá°ááá˝áŹ áĄáąááŹáḠ(á)áąááŹáá¸áąáááąáááŤááá¸âŚ. Yell, Cyan, Green, Black ááŻááá˛á áĄáąááŹáá¸áąáᡠáąááŹáá¸ááŤâŚ áááá¸áąááŹáś áĄá˛áá፠áĄáąááŹáḠ(á) áąááŹáá¸ááŻáááąáżááŹááá˝áŹáááŻáá¸ááŤáá°áˇá áá°á index.html ááŻááá˛á document page áá˝áŹ áĄáżááŹáˇ page (á) ááŻááŻá frameset áá˛á áąáááá°ááŻáľáˇá áźá˛ááŹáˇáᏠáżáá á¸ááŤááá¸á
áĄáŹáˇááŻáľáˇááŻá
áżááľáłážáááśá¸ááŻááá¸ááá¸ááŻáááá¸
index.html
á
parent document
áąááŤá
top_nav.html, menu_1.html,content.html áá˛á footer.html áąááźá parent document áżáá á¸áá˛á index.html áá˛á áąáááá°áĄááŻáľáˇáżááłááááŻá ááľááá˛á child documents áąááźáá˛áżáá á¸ááŤááá¸á <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Frameset Elements by WWM</title> </head> <frameset rows="100,*,80" frameborder="0" border="0" framespacing="0"> <frame name="topNav" src="top_nav.html"> <frameset cols="100,*" frameborder="0" border="0" framespacing="0"> <frame name="menu" src="menu_1.html" marginheight="0" marginwidth="0" scrolling="auto" noresize> <frame name="content" src="content.html" marginheight="0" marginwidth="0" scrolling="auto" noresize> </frameset> <frame name="footer" src="footer.html"> </frameset> </html>
Frameset áá˝áŹááŤážáá¸áá˛á attribute áąááźááąááŹáś cols,rows, border, bordercolor, frameborder,
Page 105 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
framespacing, name áąááźáá˛áżáá á¸ážáááŤááá¸á Framespacing ááŻáááŹááąááŹáś frame áá á¸ááŻáá˛á áá á¸ááŻážááŹáˇá áĄááźáŹáĄáąážáˇááŻá ááá¸áá˝áá¸ááŻááá¸ááḠáĄááźáá¸ááŻáľáˇááŤááá¸á frameset áá˝áŹ rows, cols áąááźááŻá percentage áá˛áááá¸áá˝áá¸áá˛ááĄá፠100% áżáá á¸áąáĄáŹáá¸áąááˇáááŤááá¸á áĽáááŹ- cols=â80%,20%â ááŻááżááŽáˇáąááˇáááŹáąááŤá⌠áĄá˛áááŻááá˝áááŻáá¸áᲠáá á¸ááŻááŻááᲠáĄáąááá°ááá¸ááŻáááá¸áąááŹáś cols=â80,*â ááŻááżááŽáˇ â*â áąááˇááľáąááˇáááŤááá¸á ááŤááŻáááḠâ*â áąáááŹáá˝áŹ áášáá¸áá˝ááąááá˛á áĄááŻááá¸áˇáąááźáĄáŹáˇááŻáľáˇááŻá áá°ááźáŹáˇáá˝áŹáżáá á¸ááŤááá¸á Tags
áá˝áá¸áˇááá¸áˇáášáḠáá˝áá¸áś áĽáááŹ
<frameset>
ááá¸áąááŹáá¸ááŻáľááąááŹáś <frameset cols="{ number | percentage | * } ,âŚ" rows="{ number | percentage | * } ,âŚ"> </frameset>
cols ááŻááá˛á attribute áá˝áŹ number ááŻáááááŻáḠpercentage áá˛ááąááˇááŻáááááŤááá¸á cols=â100,*â ááŻáááḠColumn áá˝á á¸ááŻáá°ááá¸.. ááá Column á 100 áąááŤáá áášáá¸ááŹááąááŹáś
áĄááŻáá¸áá°ááá¸âŚ
rows=â100,*,80â
ááŻáááá¸
row
ááŻáľáˇááŻáá°áá˝áŹáżáá á¸áżááŽáˇ áĄáąááááŻáľáˇá 100 áá˛á áąáĄáŹáá¸ááŻáľáˇá 80 áá°ááźáŹáˇáá˝áŹáżáá á¸ááŤááḠ⌠áĄááá¸á
row
ááŻáááąááŹáś
automatic
áąááŤáâŚ
Browser
áášáá¸ááá¸
áášáá¸ááąááŹáḠáášáĽá¸áˇááḠáášáĽá¸áˇááąááŹáá¸áąáżááŹáá¸áˇááźáŹáˇááŤáááá¸áśááḠ⌠<frame>
<frame>
ááŻáááŹ
<frameset>
áá˛ááąá
frame
áá á¸ááŻáášáá¸áˇá áŽáĄááźáá¸
áąááŹá¸áżáááŻááá¸ááŻááááá¸ááŻáľáˇááŹááŤá <frame
name="content"
src="content.html"
marginheight="0"
marginwidth="0" scrolling="auto" noresize>
áᎠ<frame> áá˛áá˝áŹááŻáááḠáąáááá°áĄááŻáľáˇáżááłáá˛á document link ááŤážáá¸áááŻá ááá¸áˇ frame
áá á¸ááŻáĄááźáá¸
ááŻááá¸ááŻááá¸
attribute
áąááźááŻáááá¸áá˝áá¸ááŻáááááŤááá¸á
ááŽáąáááŹáá˝áŹ noresize ááŻáááŹáąááˇááŻááąááźááááŤáááá¸áśááḠ⌠Default frame áá á¸ááŻáá˝áŹ frame border
áąááˇááŻá ááźá˛áá°áżááŽáˇ áĄáášáĽá¸áˇáĄáášáá¸á áášá´áľááášá˛á ááŻáá¸ááŻáááááŤááá¸âŚ
áĄááá¸á
áĄá˛áááŻá
ááŻáá¸ááŻááá¸ááźáá¸áśááąááˇáášáá¸áá°áˇááŻáááá¸áąááŹáś
noresize
ááŻáááŹáąááˇááŻáááá¸áśáąááˇáááŤááá¸á <noframe>
<noframe>
áááŻááŹ
áĄáąáááá˝áŹáąááŹá¸áżáááŹáˇáá˛ááá°áˇáá˛á
<noscript>
ááŻáááŤáá˛âŚ
ááááááŻáááĄááŻáľáˇáżááłáá˛á browser á áĄáᯠáá˝áźáá¸áąááŹá¸ááŻááááá¸áśááźáá¸áˇáĄááŻáľáˇáżááłááŹáˇáá˛á frameset ááŻáááááá°áˇááŻáááḠbrowser á support áááŻáá¸áá°áˇááŻááᏠuser áĄáŹáˇáąááŹá¸áżááąááˇááŹáˇááŹáá˛áżáá á¸ááŤááá¸á <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>
Page 106 of 197
http://www.worldwidemyanmar.com
ááŹáá Ꮰá CONTENT Web á Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET <title>Frameset Elements by WWM</title> </head> <frameset rows="20,25%,*"> <frame src="frame1.html" name="frame1" /> <frame src="frame2.html" name="frame2" /> <frameset cols="30%,*"> <frame src="frame3.html" name="frame3" /> <frame src="frame4.html" name="frame4" /> </frameset> <noframes> <body> This text will appear only if the browser does not support frames. </body> </noframes> </frameset> </html>
<noframe> ááŻáááŹááŻá <frameset> áĄááźáá¸áˇáá˛áá˝áŹáá˛áąááˇááŹáˇáááŤááá¸á
ááŽáąááŹáá¸ááŻáááḠHTML áá˛á ááŻááˇáá˝áá¸áˇáá˛á webpage áąááˇáá á¸ááŻáąááŹáḠáąááˇááźá˛ááŻáá áĄááá¸ááá¸áś áżáá á¸áąááŹáá¸áżáᎠááá¸ááŹáá˛âŚ ááżáá á¸áąááˇááḠáąáĄáŹáá¸á፠áąááśáášáá¸áśááá¸áˇáąááˇáąááźáá˛á ááźá˛áżááŽáˇááá¸áżááŽáˇáąááśááŹáąááŤá ..
Exercise -1 ááááĽáŽáˇá áźáŹ - exercise1 ááŻááá˛á folder áąááˇáá á¸áᯠááá¸áąááŹáá¸ááŻááá¸ááŤâŚ ááá¸áˇáĄáá˛áá˝áŹ images ááŻááá˛á folder áąááˇáá á¸ááŻááá¸áˇááá¸áżááŽáˇááá¸áąááŹáá¸ááŹáˇááŤâŚ html áąááˇáąááŹáśááá¸ááŻáááḠimage áąááźááŻá images folder áá˛áá˝áŹ ááŽáˇááá¸á áżáá á¸áąááąáĄáŹáá¸ááŻáááá˛áżáá á¸ááŤááá¸á Notepad ááŻáááźáá¸áśááŻááá¸ááŤá áżááŽáˇááḠHTML áá˛á ááŻáľáąá Elements áąááźááŻáááŻááá¸ááá¸áśááŻááá¸ááŤ.. áĄá˛áááŤáąááźááąááŹáś <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> </head>
Page 107 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<body> </body> </html>
ááŽáá áŻáľ áľáąááˇááŻááá˝áá¸ááŹáˇááŻááá¸áąááŤáá
áżááŽáˇááá¸
exercise1.html
ááŻáááŹáąááˇáá˛á
áááá¸áˇááŻááá¸ááŤááḠ..
áááá¸áˇááŻáľáááá¸áˇááá¸áˇááąááŹáś - notepad áá˝áŹ file menu ááąá save as áá˛ááááá¸áˇááŻáááááŤááḠâŚ
Page 108 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
File name ááŻááá˛ááąáááŹáá˝áŹ filename + extension name ááŻááąááˇáááŤááḠ.. áĄáᯠáá˝áźáá¸áąááŹá¸ááŻááá exercise1.html ááŻááżááŽáˇ áĄááá¸áąááˇááŻááá¸ááŤááḠ⌠áĄááŻááá¸ááá¸áżááŽáˇ
áá˝áźáá¸áąááŹá¸ááŻáá
ááŽ
Webpage
áĄááźáá¸
áąááŤáá¸áˇá áĽá¸áá á¸ááŻáąááˇááŤááḠâŚ
áąááŤáá¸áˇá áĽá¸ááŻá
áąááŤáá¸áˇá áĽá¸ááŻááąááŹáś <title>Simple HTML Web Page by WWM</title> ááŻááżááŽáˇáąááˇááŹáˇááŤááḠ⌠<body>
áá˛áá˝áŹ
background
áĄáąááŹáá¸ááŻá
áĄážáŤáąáášáŹáśáąáášáŹáś
áĄáąááŹáá¸ááá¸áśááŤááá¸âŚ
ááŤáááŻááá¸
<body
bgcolor=â#ffffeeâ> ááŻááżááŽáˇáżáá á¸ááźáŹáˇááŹáąááŤáá table ááŻáľáˇááŻááá¸áąááŹáá¸ááŻááá¸ááŤááḠ⌠<html> <head> <title>Simple HTML Web Page by WWM</title> </head> <body bgcolor="#ffffee"> <table> </table> <table> </table> <table> </table> </body> </html>
áááááŻáľáˇ table áá˝áŹ áąáĄáŹáá¸ááŤáĄááŻááá¸áˇ ááŻáľáąááźááŻááąáááŹáášááŤááḠ.. <table border="0" width="100%" cellspacing="0" cellpadding="0" background="images/topbkg.gif"> <tr> <td width="50%"><img border="0" src="images/topleft.gif" width="205" height="61"></td> <td width="50%"> <p align="right"><img border="0" src="images/logo.gif" width="200" height="61"></td> </tr> </table>
border=â0â ááŻááᏠtable áá˛á áąááŹáá¸ááŻáááżááá¸ááąáĄáŹáá¸áá˛áżáá á¸ááá¸á áá°ááá˛á áĄáášáá¸ááąááŹáś width=â100%â ááŻááżááŽáˇ áąááˇááŹáˇááŹááŹ
full page
áąááŤáâŚ
cellspacing=â0â
áá˛á
cellpadding=â0â
áá˛ááŹáˇááŤááá¸á
áżááŽáˇááá¸
background=âimages/topbkg.gifâ ááŻááżááŽáˇááŹáˇááŹáᏠááá¸áˇ áááááŻáľáˇ table ááᲠáąááŹáá¸ááľááŻáľááŻá images folder áá˛á topbkg.gif ááŻááá˛á image file ááŻáááŻáľáˇááŻáááąáżááŹááŹáˇááŹáá˛áżáá á¸ááá¸á
Page 109 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
áąááŹáá¸áá á¸ááŻááąááŹáś <tr> ááŻááᏠtable row áá á¸ááŻáá°ááŻááá¸ááḠ.. <td> ááąááŹáś cell áá á¸ááŻááŻá width=â50%â ááŻááżáᎠáá á¸ážáá¸áąááŹáá¸áá°ááŻááá¸ááŤááá¸á áżááŽáˇááḠááá¸áˇáĄáá˛áá˝áŹ <img ááŻááżááŽáˇ src=âimages/topleft.gifâ ááŻááżááŽáˇááŻááá¸áá á¸ááŻááŻá ááá¸áśááŹáˇááŤááá¸á áąááŹáá¸áá á¸ááŻáááá¸áˇ áĄá˛ááĄááŻááá¸áˇááŤáá˛âŚ logo.gif ááŻáááŹááŻáááá¸áśááźáá¸áˇááŹáˇááŤááḠ.. ááŽáąáááŹáá˝áŹ áááááŹáˇáááá˝áŹá áĄáąáááááŻáľááŻáááá¸áśáá˛ááąáááŹáá˝áŹ <p align=ârightâ> ááŻáááŹáášáłááˇáááŤááŤáá°áˇ ⌠ááŻáá¸ááŤááá¸.. ááŻáľáąááźááŻá áááśá¸áá˛ááąáááŹáá˝áŹ áá°ááá˛á Default áąáááŹááąááŹáś align=âleftâ áĄáżááá¸áś ááá¸ááá¸áá˛áá˝áŹ áá°ááŹáˇááŹáżáá á¸áá˛ááĄááź áḠáá°áááŻáááááśá¸áąááŹáśáᲠááŹááá¸áá˛áá˝áŹááá¸áśááá˛á ááŻáľááŻááᲠalign=ârightâ ááŻááżááŽáˇ <p> tag áá˛á ááá¸áśááźáá¸áˇááŻáľáˇááŹáˇááŹáżáá á¸ááŤááá¸á ááŻááá Table áá˝áŹáąáĄáŹáá¸ááŤáĄááŻááá¸áˇááŻááá¸ááá¸áśááŤááḠ. <table border="0" width="100%" cellspacing="0" cellpadding="0" background="images/linebkg.gif"> <tr> <td width="100%"><font face="Arial" size="2"><b>&nbsp;&nbsp; <font color="#FFFFFF">HOME&nbsp;&nbsp; |&nbsp;&nbsp;
NEWS&nbsp;&nbsp;
|&nbsp;&nbsp;
PRODUCTS&nbsp;&nbsp;
|&nbsp;&nbsp;
SERVICES&nbsp;&nbsp; | &nbsp;&nbsp; ABOUT US&nbsp;&nbsp; |&nbsp;&nbsp; CONTACT US</font></b></font></td> </tr> </table>
ááŽáąáááŹáá˝áŹ &nbsp; ááŻááżááŽááŻáľáˇááŹáˇááŹáᏠspace áąááźáĄááźáá¸áá˛áżáá á¸ááŤááá¸.. áááá Table áá˝áŹáąáĄáŹáá¸ááŤáĄááŻááá¸áˇááŻááá¸ááá¸áśááŤááḠ. <table border="0" width="100%" background="images/botbkg.gif" cellspacing="0" cellpadding="0"> <tr> <td width="100%"><img border="0" src="images/botbkg.gif" width="38" height="14"></td> </tr> </table>
ááŻááá table áá˛á áááá table ážááŹáˇáá˝áŹáąááŹáś áąáĄáŹáá¸ááŤáĄááŻááá¸áˇááá¸áśááŻááá¸ááŤá <p style="margin-left: 20"><font face="Arial" size="2">Place your content here.</font></p> <p style="margin-left: 20"><font face="Arial" size="2">Place your content here.</font></p> <p style="margin-left: 20"><font face="Arial" size="2">Place your content here.</font></p> <p style="margin-left: 20"><font face="Arial" size="2">Place your content here.</font></p> <p style="margin-left: 20" align="center"><font face="Arial" size="2">&copy; COPYRIGHT 2010 ALL RIGHTS RESERVED WORLDWIDEMYANMAR.COM</font></p>
<p> tag ááŻáááŻáľáˇáżááŽáˇáąááŹáś áá˝áźáá¸áąááŹá¸ááŻááááŻááášáá¸áá˛á content áąááźááŻá ááŽááŹáˇáá˝áŹ ááá¸áśááźáá¸áˇáąááŹá¸áżáážá ááá˝áŹáá˛áżáá á¸ááŤááá¸á
Page 110 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
áĄáᯠpage áá á¸ááŻááľáŻáˇáá˛á áĄááŹáˇáąááŹáá¸áąááźááŻá 0 áá˛ááŹáˇááŤááá¸âŚ <body
topmargin="0"
leftmargin="0"
rightmargin="0"
bottommargin="0"
marginheight="0"
marginwidth="0"
bgcolor="#FFFFEE">
ááŤááąááŹáś ááá¸áᏠáĄáąáááąáĄáŹáḠmargin ááŻá â0â ááŹáˇááŻááá¸ááŹáá˛áżáá á¸ááŤááá¸á áĄáᯠááŤáąááźáĄáŹáˇááŻáľáˇááŻááąááŤáá¸áˇáżááŽáˇáąááŹáś result ááŻáážááá¸áśááąáĄáŹáḠ<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Simple HTML Web Page by WWM</title> </head> <body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginheight="0" marginwidth="0" bgcolor="#FFFFEE"> <table border="0" width="100%" cellspacing="0" cellpadding="0" background="images/topbkg.gif"> <tr> <td width="50%"><img border="0" src="images/topleft.gif" width="205" height="61"></td> <td width="50%"> <p align="right"><img border="0" src="images/logo.gif" width="200" height="61"></td> </tr> </table> <table border="0" width="100%" cellspacing="0" cellpadding="0" background="images/linebkg.gif"> <tr> <td width="100%"><font face="Arial" size="2"><b>&nbsp;&nbsp; <font color="#FFFFFF">HOME&nbsp;&nbsp; |&nbsp;&nbsp; NEWS&nbsp;&nbsp; |&nbsp;&nbsp; PRODUCTS&nbsp;&nbsp; |&nbsp;&nbsp; SERVICES&nbsp;&nbsp; |&nbsp;&nbsp; ABOUT US&nbsp;&nbsp; |&nbsp;&nbsp; CONTACT US</font></b></font></td> </tr> </table> <p style="margin-left: 20"><font face="Arial" size="2">Place your content here.</font></p>
Page 111 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<p style="margin-left: 20"><font face="Arial" size="2">Place your content here.</font></p> <p style="margin-left: 20"><font face="Arial" size="2">Place your content here.</font></p> <p style="margin-left: 20"><font face="Arial" size="2">Place your content here.</font></p> <p style="margin-left: 20" align="center"><font face="Arial" size="2">&copy; COPYRIGHT 2010 ALL RIGHTS RESERVED WORLDWIDEMYANMAR.COM</font></p> <table border="0" width="100%" background="images/botbkg.gif" cellspacing="0" cellpadding="0"> <tr> <td width="100%"><img border="0" src="images/botbkg.gif" width="38" height="14"></td> </tr> </table> </body> </html>
Table ááŻáľáˇááŻááŤ
ááá¸ááá¸áżááŽáˇ ááŻááá table áá˛áá˝áŹ menu áąááŹáá¸ááŹáˇáá˛á home, news, products, services, about, contact á ááá¸ááŻááááŻá Link áąááźáąááˇááá¸ááŻáááá¸áąááŹáś anchor ááŻááá˛ááŻáľáˇááá˝áŹáąááŤá ..
Page 112 of 197
http://www.worldwidemyanmar.com
ááŹáá Ꮰá CONTENT Web á Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<table border="0" width="100%" cellspacing="0" cellpadding="0" background="images/linebkg.gif"> <tr> <td width="100%"><font face="Arial" size="2"><b>&nbsp;&nbsp; <font color="#FFFFFF"><a href="index.html">HOME</a>&nbsp;&nbsp; |&nbsp;&nbsp; <a href="news.html">NEWS</a>&nbsp;&nbsp; | &nbsp;&nbsp; <a href="products.html">PRODUCTS</a>&nbsp;&nbsp; |&nbsp;&nbsp; <a href="services.html">SERVICES</a>&nbsp;&nbsp; |&nbsp;&nbsp; <a href="about.html">ABOUT US</a>&nbsp;&nbsp; |&nbsp;&nbsp;<a href="contact.html">CONTACT US</a></font></b></font></td> </tr> </table>
áááá¸áąááŹáś HTML ááŻááᏠáĄááźáá¸ááŻá ááŻááˇáá˝áá¸áˇááá¸.. ááźáá¸áá°ááḠ⌠ááŻáááĄáá° áá°á ááŻáľáąááŹá¸ááŻááá¸ááḠááŻááá¸ááąááŹáḠááá¸áˇááá¸áąááŤáâŚ
CSS ááŻá ááá¸ááá¸áżááŽáˇááźáŹáˇážáááąáĄáŹáḠâŚ. -->
CSS (Cascading Style Sheets)
áá á¸áášáłáááąááźááąáżááŹážáááá¸
Web
Page
áá á¸ááŻáááŻááŹ
information
áąááźááŻáážááá¸áśááŻááááŹ
viewer
ážááŽáˇáá á¸ááŻááŤáá˛áá˛á ⌠áĄáášáłáááąááŹáś Multimedia áąááźáĄááźáá¸áá˛á ⌠áá á¸áášáłááááąááŹáś áá°ááŻáááá˛á ááŻáá¸áąááŹáá¸áášáá¸áąááźááŻá ááá¸ááá¸áˇá áŹáąá áŹáá¸áąááźáĄá áŹáˇ e-Media Advertise ááŻáá¸ááŹáá˛áá˛á⌠ááá°ááŽáá˛ááá°áąááźá ááá°ááŽáá˛á áá°áąááŤáá¸áśááąá áĄáášáłááˇáášáłááˇážááá¸áśážá ááľá áŹáˇážá áąážááá¸ážáááŹááŤáá˛âŚ ááŤáąážááŹáá¸áś áá˝áźáá¸áąááŹá¸ááŻáá áᎠweb page ááŻáááŹážááŽáˇááŻá áąážááá¸ážááá¸áśááąáĄáŹáá¸
Page 113 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
Web Page ááŻá Layer ááŻáľáˇááŻááźá˛ááŻáá¸ááŻááá¸ááŤááḠ⌠1. Content, 2. Presentation, 3. Behavior ááŻááżááŽáˇáżáá á¸ážáááḠ⌠Content Layer áá˝áŹáąááŹáś HTML text áąááźááŤážáá¸ááŤááá¸âŚ áá°ááąááŹáś áĄááá Main áášáá˛á áĄááŻááá¸áˇáąááŤá⌠Presentation Layer áá˝áŹááŻáááḠáąá áŹáąá áŹá Content Layer áá˛á Content áąááźááŻá ááá¸ááŻáááá¸ááŻáľ áąááŹá¸áżááąááˇááá¸ááŻááá˛ááĄááŻááá¸áˇáąááź áżáá á¸ááŤááá¸.. áá°áááŻá CSS áĄááŻááá¸áˇááŻááááźá˛ááŻááá¸ááá¸âŚ áąááŹáá¸ááŻáľáˇáá á¸ááŻááąááŹáś Behavior Layer áĄááŻááá¸áˇáá˛áżáá á¸ááá¸âŚ user input filtering
áąááźááŻáá¸ááḠ..
validation
áąááźááŻáá¸ááŹáášáłááˇáąááźáĄááźáá¸áá˛áżáá á¸ááḠâŚ
áá°áááŻá
JavaScript
áĄááŻááá¸áˇááŻááááźá˛ááŻááá¸ááŻáááááŤááá¸á ááŤááŻáááḠáĄáᯠCSS ááŻááᏠWeb Page áá á¸ááŻáá˛á áá˝áááá áĄáżááá¸ááá¸áˇááá¸áˇáááĄááŻááá¸áˇáá˝áŹ áĄááá áášáá˛á áĄááá¸áˇáá ááąáááŤážáá¸áąáááŤááá¸á áżááŽáˇáąááŹáś HTML áĄááźáḠLayout áąááźááŻáááá¸ááŽáˇáąááˇááŹáá˛áżáá á¸ááá¸á HTML ááąááŹáś content áąááźááŻá áąááˇááźá˛ááá¸áąááŹáá¸ááŻáááá˛á CSS ááąááŹáś ááá¸áˇáá˛áááŻáá áąááˇááźá˛ááá¸áąááŹáá¸ááŹáˇááŹáąááźááŻá ááŻáľá áľáášáąááˇááŻáááá˛áżáá á¸ááá¸á CSS
ááŻááĄááŻáľáˇáżááłáżááá¸áˇáżááá¸áś
áááá¸áˇáášá´áá¸ááŻááá¸áżááá¸áˇ
áá˛á
áá˝ááá˛á
Web ááŻáľá áľ
Page
Layout
áĄáášáŹáˇážááŽáˇáá˛á áá á¸ááŻááŻá
ááŽááŻááá¸áˇááŻáľá áľáąááźááŻá
HTML
CSS
file
áá á¸ááŻááá¸áˇááąá
ááá¸áá°áá˛á áźáŹáąááˇááźá˛ááŻááá¸áżááá¸áˇáąážááŹáá¸áś
CSS
ááŻááá°ááŻáľáˇáášáŹáˇážáááŤááá¸á CSS áá˛á áĄáááá¸áŤáá¸ááąááŹáś Cascading Style Sheets áá˛áżáá á¸ááŤááá¸á fonts, text alignment, spacing, margins, and list formatting áąááźáĄááźáḠááŻáľá áľáášááŻáááĄááźáḠ1996 áąááŹáá¸á World Wide Web Consortium (W3C) áĄáááĄáá˝áá¸áżááłáĄáżáá ḠCSS1 ááźáá¸áąááááŹááŹáżáá á¸áżááŽáˇ 1998 áąááŹáá¸áá˝áŹ CSS2 á ááá¸áżááá¸áś ááźáá¸áąááááŹáá˛ááᏠáĄááŻááŻáááḠCSS3 ááŻááżááŽáˇáżáá á¸áąáááŤáżááŽâŚ
Applying Usage CSS ááŻá áĄááŻáľáˇáżááłáá˛á áąáááŹáá˝áŹ Inline, External áá˛á Internal ááŻááżááŽáˇááźá˛áżááŹáˇááŻááá¸ááŤááá¸á áĄááá¸
áá˝áá¸áˇááá¸áˇáášáḠáá˝áá¸áś áĽáááŹ
Page 114 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS Internal CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
HTML Document áá á¸ááŻáĄááźáá¸áˇáá˝áŹ áąááˇááŹáˇáááŹáášáłááˇááŻá Internal CSS ááŻáááąááááŤááá¸á Internal CSS ááŻáááŻáľáˇáá˛ááĄá፠HTML page áá˛á <head></head> elements áĄááźáá¸áˇáá˝áŹáᲠáąááˇááŹáˇ áááŹáżáá á¸ááŤááá¸á <html> <head> <title>Internal CSS by WWM</title> <style type="text/css"> </style> </head> <body> </body> </html>
External CSS
Internal CSS á Web Page áąááźáá˛á Layout , Design áąááźááŻá file áá á¸ááŻááá¸áˇááąá Control ááŻáá¸ááŻááááááŤáá°áˇá ááŤáąááá˛á External CSS ááąááŹáś Control ááŻáá¸ááŻáááááŤááá¸á External CSS á áżááá¸áááąá ááŽáˇááá¸á .css ááŻááżááŽáˇ ááŻááá¸áá á¸áᯠááá¸áąááŹáá¸ááŹáˇááḠ⌠ááá¸áˇááŻááá¸ááŻá html page ááŻááá¸áˇááąá áąáááá°ááŻáľáˇááźá˛ážááááŹáżáá á¸ááŤááá¸á ááŽáąááŹáś ááá¸áˇ áżááá¸áá ááŻááá¸ááŻá áżááá¸ááŻááá¸áżááŽááŻáááŹáá˛á áášááá¸ááá¸ááŹáˇáá˛á html page áášáŹáˇáá˛á ááŻáľá áľáąááźáááá¸áˇ áąáżááŹáá¸áˇáá˛ááźáŹáˇááŤááá¸ááśá¸ááḠâŚ
ááŽááŻá áżááá¸áááąá áášááá¸ááá¸áĄááŻáľáˇáżááłááŻáááĄááźáḠáąáĄáŹáá¸á፠tree type áĄááŻááá¸áˇ style ááŻááá˛á folder áąááˇáá á¸áᯠááŽáˇááá¸ááąááŹáá¸áżááŽáˇ css file áąááźááŻá áĄá˛ááĄáá˛áá˝áŹáááśá¸ááźáá¸áˇáĄááŻáľáˇáżááłááŤá
<html> <head> <title>External CSS by WWM</title>
Page 115 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body> </body> </html>
áá˝áźáá¸áąááŹá¸áśáĄáąááá˛á CSS Style Sheets ááŻáááŻáľáˇááá¸ááŻáááḠExternal ááŻááᲠááŻáľáˇááŻáá ááźáá¸áˇáá˝áŹáżáá á¸áá˛ááĄááźáḠáᎠTutorial áąááźááŻáááá¸áˇ External Style Sheets áąááźáá˛ááᲠááŻáľáˇáżáááźáŹáˇáá˝áŹáżáá á¸ááŤááá¸á Inline CSS
Inline ááąááŹáś áĄááŻáľáˇáá˛ááŤááá¸âŚ áá°á HTML áá˛á tag áĄááźáá¸áˇáá˛áá˝áŹáá˛áąááˇááŹáˇ áááŹáášáłááˇááŤá áá°ááá˛á inline áĄááŻáľáˇáżááłááá¸áˇááąááŹáś style ááŻá attribute áĄáżáá á¸ááŹáˇáżááŽáˇ ááá¸áˇáá˛á áĄáá˛áá˝áŹ Property ááŻáááá¸áśááźáá¸áˇáąááˇááŹáˇ áááŤááá¸á <p style="color: red; margin-left: 50%">This is Paragraph</p>
Syntax . Structure CSS áá˛á ááźá˛áá áá¸áˇááá¸áąááŹáá¸ááŻáľááŻá ážááá¸áśááąáĄáŹáá¸
selector {property: value} áá°ááá˝áŹ
áĄááá
áĄááŻááá¸áˇ
ááŻáľáˇááŻááá¸áˇáá˛
ááŤážáá¸ááŤááá¸á
HTML
áá˝áŹ
<tag
attribute=âvalueâ>
ááŻááá˛á
ááľáŻá áľááŻá
áááááŹáˇááááŤáááá¸áśááḠ⌠ááŽáĄááŻááá¸áˇááŤáᲠCSS áá˝áŹááá¸áˇ selector {property: value} ááŻááżááŽáˇáá˝áááŤááá¸á
HTML
CSS
<tag attribute=âvalueâ>
selector {property: value}
áĽááᏠ- <body bgcolor=âredâ>
áĽááᏠ- body {background-color: red}
Page 116 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
Selector ááąááŹáś HTML áá˛á tag áąááźááŻááᲠááŻáľáˇážáááŹáášáŹáˇááŤááḠ.. áĽááᏠ<body> ááŻááá˛á tag áĄááźáḠbody selector ááŻááá˛ááŻáľáˇááŤááá¸á ááŤááŻáááḠáᎠselector áá˛á property áá˛á value ááŻáááᏠááá¸áˇ html tag áá˛á element áĄááźáḠáá˛áżáá á¸ááŤááá¸á ááŻáááŻáááŹá áá˝áźáá¸áąááŹá¸ááŻááá body {background-color:
red} ááŻááżááŽáˇáąááˇááŹáˇááḠHTML áá˛á body
background áá˝áŹ áĄááŽáąááŹáá¸áżáá á¸ááźáŹáˇááŤááá¸ááśá¸ááá¸..
Value Value ááŻáááá¸áśááźáá¸áˇáĄááŻáľáˇáżááłáá˛ááĄá፠ááá¸áśááźáá¸áˇááŹáˇáá˛á á áŹááŻáľáˇá áá á¸ááŻáľáˇááá¸ááŻááąáááḠááá¸áˇááŻá Double Quote â -- " ááá¸áśáąááˇáááŤááá¸á p {font-family: "sans serif"} áĄá˛áááŻáááŻáľá áľáášáłááˇáąááŤáá ááŻáľáá˝áá¸áĄááŻááá¸áˇááŻáááá¸áąááŹáś Double Quote ááá¸áśá ááŹáááŻáááŤáá°áˇá CSS
áá˝áŹáĄáąááŹáá¸áąááźááŻáááá¸áá˝áá¸áá˛ááĄááŤ
HTML
áá˝áŹáášáłááˇááŤáá˛..
Colour
Name
ááŻáááááŻáá¸
Hex
Code
ááŻáááá¸áśááźáá¸áˇááŻáááááŤááá¸á
Property ááŻáááĄáá°
Property
áá˝áŹ
áá á¸ááŻááá¸ááŻááżááŽáˇ
ááá¸áśááźáá¸áˇááŻáľáˇáášáá¸ááá¸ááŻáááá¸
semicolon
â;â
áąááˇááŻááááśá¸ááźáá¸áˇ
áĄááŻáľáˇáżááłáąááˇáááŤááá¸á p {text-align: center; font-family: "sans serif"}
Selector Selector áąááźááąááŹáś HTML áá˛á tag áąááźááŻá áĄááźáḠstyle sheet ááá¸áá˝áá¸ááŹáżáá á¸áá˛ááĄááźáḠselector áąááźá HTML tag áĄááá¸áąááźáá˛ááá˛ááŻáľáˇáááŤááá¸á áĽááᏠbody, h1,h2,p,input,textarea,dl,dt,dd,td,th ⌠á ááá¸áąááŤáá Selector áąááźááŻá
áąááŤáá¸áˇáżááŽáˇáąááˇááŹáˇááá¸ááŻáááá¸ááá¸áˇ
áááŤááá¸âŚ
ááŻááá˛áááŻáááąááˇááŹáˇááá¸ááŻáááá¸
áąááŹá¸ááŹ
â,â
áąááˇáá á¸ááŻááá¸áśáąááˇáááŤááá¸á h1,h2,h3,h4,h5,h6 { color: red; } ááŤááŻáááḠh1-h6 Heading áąááźáĄáŹáˇááŻáľáˇá áĄááŽáąááŹáá¸áąááźáżáá á¸áąáááŤááá¸ááśá¸ááḠ⌠HTML Page áá˛áá˝áŹ <h1> ááŻááá˛ááŻáľáˇááŻáľáˇ <h2> ááŻááᲠááŻáľáˇááŻáľáˇ color ááąááŹáś áĄááŽáąááŹáá¸áá˛áżáá á¸ááŤááá¸á Multiple Selector ááá¸áá˝áá¸ááŻááá¸ááŹáá˛á
Page 117 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
Class Selector áĄááŻááá¸ááá¸áżááŽáˇ CSS áá˛á Class Selector áąááźáĄáąážááŹáá¸áˇááŻááąáżááŹááŤááḠ⌠HTML Element áá á¸ááŻááá¸áˇáĄááźáá¸áˇáá˝áŹ ááá¸áˇáá˛á content ááŻááĄáášáłááˇáášáłááˇááźá˛áąááˇáášáá¸ááá¸ááŻáááḠClass Selector ááŻáááŻáľáˇáąááˇáááŤááḠ.. ááá¸ááŻááĄáášáłááˇáášáłááˇááźá˛áąááˇááŹááá¸áˇ ááá¸ááŻááąááź ááźáŹáżááŹáˇááźáŹáˇááá¸áˇáááŻáᏠáĽáááŹááŻáážááá¸áśááŤá CSS Code p.right {text-align: right} p.center {text-align: center} p.left{text-align: left} HTML Code <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <p class="right">This is RIGHT</p> <p class="center">This is CENTER</p> <p class="left">This is LEFT</p> </body> </html>
Page 118 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<p> element áá˛áá˝áŹ class ááŻááá˛á attribute ááŻáááŻáľáˇáżááŽáˇ CSS áá˛á class selector ááŻá value áĄáżááá¸áśááŻáľáˇááŹáˇááŹáá˛áżáá á¸ááá¸á class=ârightâ
ááŻááżááŽáˇááŻáľáˇááŹáˇááŻááá¸áżááá¸áˇááŹ
p.right
{text-align:
right}
ááŻááąáááá°ááŻáľáˇááźá˛ááŹáá˛á
áĄáá°áá°áá˛
áżáá á¸ááźáŹáˇááŤáááá¸áśááá¸âŚ áąááŹáá¸áá á¸ááŻááąááŹáś áᎠclass selector ááŻááᲠelement ááŻááá¸áˇááąáááá°ááŻáľáˇááŻááááąáĄáŹáḠCSS áá˝áŹ áąááˇááŹáˇááŻáááááŤááḠ⌠CSS Code .right {text-align: right} .center {text-align: center} .bold{font-weight: bold;} HTML Code <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1 class="center">This is CENTER Head</h1> <p class="right">This is RIGHT</p> <p class="bold">This is BOLD</h3> </body> </html> ááŽáĄááŻááá¸áˇááŻáááḠ<p> element ááá˛áżáá á¸áąá <h> element ááᲠáżáá á¸áąá áąáááá°ááŻáľáˇááźá˛ááŻáááááŤááá¸á ááŽááŻá class áĄááá¸áąááźááŻá ááŻááá¸ážáááłáá¸ááŹáąááˇááŻáááááŤááḠ⌠ááŤáąááá˛á áá˝áźáá¸áąááŹá¸ááŻáááąááˇááŻááá¸áá˛á class áĄááá¸áąááźá ááľááŤáá¸áąááźááżáá á¸áááŤáá°áˇá áááá¸áˇáááá¸áˇáąááźáá˛ááąááˇááŹáˇááḠááá¸áˇ class ááŻáááááąááŹáśááŤáá°áˇá CSS Code .mgmg {text-align: right} .123 {text-align: center} HTML Code <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head>
Page 119 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<body> <h1 class="123">This is CENTER Head</h1> <p class="mgmg">This is RIGHT</p> </body> </html> áĄáąááá code áá˛á result ááŻáážááá¸áśááá¸ááŻáááḠclass=âmgmgâ á áĄáá˝áá¸áĄááŻááá¸áˇáąáááá˝áŹáżáá á¸áżááŽáˇ class=â123â ááąááŹáś ááąááááŤáá°áˇá
ID Selector Class Selector áżááŽáˇáąááŹáś ID Selector ááŤâŚ ID Selector ááŻá ááá¸áá˝áá¸ááá¸ááŻáááá¸áąááŹáś selector áá˛á áąáá˝ááá˝áŹ â#â sign áąááˇááľáżááŽáˇáąááˇáááŹáá˛áżáá á¸ááá¸á CSS Code #idsel{ text-align: center; color: red } HTML Code <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1 id="idsel">This is ID Selector</h1> </body> </html>
Page 120 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
áá˝áá¸áášáḠ-: ááŤáąážááŹáá¸áś ID selector áĄááźáḠID attribute ááŻáááŻáľáˇáżááŽáˇáąááŹáś Class selector áĄááźáḠClass attribute ááŻáááŻáľáˇááŤááá¸á
Code Format áąááŹáá¸áá á¸ááŻááąááŹáś
CSS code
áąááˇáąááźááŻááąááˇááŹáˇáá˛ááĄááŤ
HTML
áá˝áŹáąáżááŹáá˛ááááŻááá˛
áżááá¸ááá¸áżááá¸ááá¸ááŻááááŹ
ááźáá¸áá°áąáĄáŹáḠáá˝áá¸áˇáá˝áá¸áˇááá¸áˇááá¸áˇáąááˇááŹáˇááá¸áśááŤááḠ.. áąááˇááŹáˇáá˛áááŻáľááąááŹáś -
body { scrollbar-face-color: #000000; font-size: 10px; font-family: times; } p{
Page 121 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
font-size: 9px; font-family: verdana; color: red; } ááŽáĄááŻááá¸áˇáąááˇááŹáˇááŹáˇááḠáá˝áźáá¸áąááŹá¸ááŻáá ážááá¸áśáááŹááá¸áˇ ááźáá¸áá°ááŤááá¸á
Comment /* --- */
CSS áá˝áŹ Comment áąááˇááŹáˇááŻáľááąááŹáś /* comment text */ ááŻáľá áľáĄááŻááá¸áˇáąááˇááŹáˇáááŤááá¸.. áĄá áá˝áŹ /* ááŻáááŹááŻááąááˇáżááŽáˇ comment áąááźáá˛á áĄááŻáľáˇáá˝áŹáąááŹáś */ ááŻááąááˇááŹáˇáąááˇáżááá¸áˇáĄáŹáˇáżááá¸áś browser áá˝áŹ ááá¸áˇ comment ááŻááąááááŹáá˝áŹáááŻáá¸ááŤáá°áˇá /* Name : CSS Tutorial URL: http://www.worldwidemyanmar.com Description: This is HTML and CSS Tutorial by WWM Version: 1.0 Author: Administrator Tags: news, reviews, tutorial, products, buy, sell */ body { scrollbar-face-color: #000000; font-size: 10px; font-family: times; } /* This is paragraph */ p{ font-size: 9px; font-family: verdana; color: red; }
ááŽááŻááąááˇááŹáˇáżááá¸áˇáĄáŹáˇáżááá¸áś áᎠCSS áá˛á Author áá˛á áá°áá˛áááá¸ááá¸áá˛ááĄáąážááŹáá¸áˇáĄááŹáąááź áĄáŹáˇááŻáľáˇááŻá CSS ááŻááá¸ááŻá ááźáá¸áśážááá¸áśááŻááá¸ááŹáá˛á ááááŹáąáĄáŹáḠComment áąááˇááŹáˇááŹáˇáá˛á áĄááźáḠááááŹááŻááá¸ááŤááá¸á Page 122 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
Colors and Backgrounds
HTML Webpage áąááźáá˛á á áŹááŹáˇáá˛á áĄáąááŹáḠBackground áá˛á áĄáąááŹáá¸áá˛á Background Image áąááźááá¸áá˝áá¸ááŻáááĄááźáá¸áá˛áżáá á¸ááŤááá¸.. Property color
áá˝áá¸áˇááá¸áˇáášáḠáá˝áá¸áś áĽááᏠáᎠProperty á á áŹááŹáˇáąááźáá˛á foreground áĄáąááŹáá¸áĄááźáá¸áĄááŻáľáˇáżááłážáááŤááá¸á áĽáááŹ
áĄáąááá˛á
ážáááśá¸ááá¸ááŻáááá¸
<h1>
áá˛á
á áŹááŹáˇáąááźááŻá
áĄááŽáąááŹáá¸áąááˇáášáá¸ááá¸ááŻáááḠáá˝áźáá¸áąááŹá¸ááŻááá áąáĄáŹáá¸ááŤáĄááŻááá¸áˇ CSS áá˛á HTML áá˝áŹáąááˇááŹáˇáááŤáááá¸áśááḠ⌠CSS Code (style.css) h1{ color: #FF0000; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>This is Red Header</h1> </body> </html>
Page 123 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
background-color
DREAM IT, CODE IT BY PLANETCREATOR .NET
á áŹááŹáˇáąááźáá˛á
áąááŹáá¸ááľ
Background,
Text
áąááźáá˛á
áąááŹáá¸ááľ
Background
áĄáąááŹáá¸ááŻá áąáżááŹáá¸ááŻáááĄááźáá¸ááŻáľáˇááŤááá¸á CSS Code (style.css) body { background-color: cyan; } h1 { color: #FF0000; background-color: #3499AB; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>This is Red Header</h1> </body> </html>
background-image
áąááŹáá¸ááľ ááŻáľááŻáááá¸áśááźáá¸áˇáášáá¸ááá¸ááŻáááḠbackground-image ááŻááżááŽáˇááá¸áśáąááˇáááḠ. Value ááąááŹáś url(âfilenameâ); ááŻááżááŽáˇááá¸áśáááá¸âŚ url ááŻááᏠááááááŻááááá¸áśááá¸áś ááŻáľáá˛á
ááá¸áˇáąážááŹáá¸áˇáąááŤáâŚáĄááá¸á
Web
Link
ááąáááá¸áśáášáá¸ááá¸ááŻáááá¸
url(âhttp://www.worldwidemyanmar.com/my-computer1.pngâ);
Page 124 of 197
ááŻááżááŽáˇááá¸áś
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET ááźáá¸áˇáąááˇáááŤááá¸á CSS Code (style.css) body { background-color: cyan; background-image: url("my-computer1.png"); } h1 { color: #FF0000; background-color: #3499AB; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>This is Red Header</h1> </body> </html>
background-repeat
áĄáąááá
ááŻáľáá˝áŹ
áĄáášáŹáˇááŻááá¸áąááŹ
Page 125 of 197
áá˝áźáá¸áąááŹá¸ááŻáá áĄááľááŻááá¸ááŤ
áááááŹáˇááááŤááááśá¸ááḠ..
áĄá˛áááŤááąááŹáś
áĄáżááá¸áśáżáá á¸áąáááŹáąááźááááŤááá¸ááśá¸ááḠâŚ
ááŻáľáąááźá ááŽááŻáľáąááźáá˛á
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET áąááááźáá¸ááááŻá ááá¸áááá¸á ááá¸áá˝áá¸ááá¸ááŻáááḠááŻáľáˇááŤááá¸á ááŽáĄáá˛áá˝áŹ value áĄáŹáˇáżááá¸áś á áášáłááˇáá˝áááŤááá¸âŚ Value
áá˝áá¸áˇááá¸áˇáášáḠáá˝áá¸áś áĽáááŹ
background-repeat: repeat-x
áĄáášáŹáˇááŻááá¸
áąááˇáášáá¸áˇááá¸
ááŻáľáąááźááŻá
áąáááŹááš ááŹáˇáąááˇááŹáᲠáżáá á¸ááŤááá¸âŚ background-repeat: repeat-y
áĄáąáááąáĄáŹáá¸
ááŻáľáąááźááŻá
áąááŹá¸áżá
áąááˇááźáŹáˇáá˝áŹáżáá á¸ááŤááá¸á background-repeat: repeat
áá°ááąááŹáś áąááˇááá¸áᏠáĄáąáááąáĄáŹáḠáĄááŻáá¸
áĄáżááá¸áś
ááŻáľáąááźááŻá
ááá¸áśáąááˇááźáŹáˇáá˝áŹááŤâŚ áá°á Default Value ááá¸áˇáżáá á¸ááŤááá¸á background-repeat: no-repeat
áĄááá¸á áá˝áźáá¸áąááŹá¸ááŻáá ááá¸áá˝áá¸ááŻááá¸áá˛á ááŻáľááŻá
repeat
áááŻáá¸áášáá¸áá°áˇá
áá á¸ááá¸áˇáĄáŹáˇáżááá¸áś áá á¸ááŻááá¸áˇááá¸áśááŹáˇáᏠáá á¸ááŻáľáá˛áąáááášáá¸ááá¸ááŻáááḠááŻáááŻáľáˇááŤááá¸..
áąáĄáŹáá¸ááŤ
norepeat áĽáááŹáá˝áŹ
norepeat ááŻáááŻáľáˇáżáááŹáˇááŤááá¸á CSS Code (style.css) body { background-color: cyan; background-image: url("my-computer1.png"); background-repeat: no-repeat; } h1 { color: #FF0000; background-color: #3499AB; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head>
Page 126 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET <body> <h1>This is Red Header</h1> </body> </html>
background-attachment
ááá¸áśááźáá¸áˇááŹáˇáá˛áááŻáľáąááźááŻá
lock
ááŻáá¸ááŹ
unlock
ááŻáá¸ááŹáąááźáĄááźáá¸
ááŻáľáˇááŹáá˛áżáá á¸ááḠ⌠lock ááŻáá¸ááá¸ááŻáááŹááąááŹáś áá˝áźáá¸áąááŹá¸ááŻáááá˛á ááŻáľá browser áá˛á scroll
ááŻáááźá˛ááŻááá¸ááŻááá¸áˇáá˝áŹ
ááŻáľá
áĄáąáááąáĄáŹáá¸
áááá¸ááźáŹáˇáá˛
ááááááŹáˇááŻááá¸áá˛á
áąáááŹáá˝áŹ áĄáżáá˛áá˝ááąááá˛áááŻáľá áľááŤáá˛âŚ Value
áá˝áá¸áˇááá¸áˇáášáḠáá˝áá¸áś áĽáááŹ
background-attachment: scroll
áá°á
Image
ááŻá
Unlock
áĄááŻááá¸áˇáżáá á¸áąáááąá ááŤááá¸á Default Value áąááŤáá background-attachment: fixed
ááŻáľááŻá
lock
ááŻáá¸ááŹáá˛áżáá á¸ááŤááá¸á
áąáĄáŹáá¸á áĽáááŹááŻá á áá¸áˇážááá¸áśá፠CSS Code (style.css) body { background-color: cyan; background-image: url("my-computer1.png"); background-repeat: no-repeat; background-attachment: fixed; } h1 { color: #FF0000;
Page 127 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET background-color: #3499AB; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>This is Red Header</h1> </body> </html>
Scroll ááŻááąáĄáŹáá¸ááŻáá ááźá˛ááš ááŻááá¸áąááŹá¸ááá¸áˇ ááŻáľá ááźá˛ááŻááḠááŻááá¸áˇáá˝áŹ ááŻááá¸ááŤááŹááŹááŻá áąááźááááŤáááá¸áśááá¸..
background-position
ááŻáľááŻá ááááááŻááááŹáˇááŻááá˛ááąáááŹááá¸áá˝áá¸áżááá¸áˇ áá˛áżáá á¸ááŤááá¸á áĽáááŹáĄáąááá˛á
position
ááŻá
100px
255px
ááŻááááá¸áá˝áá¸ááá¸ááŻáááá¸
ááá¸ááá¸áąááˇááąá 100px áĄááźáŹáĄáąážáˇáá˛á áĄáąááááąá 255px áĄááźáŹáĄáąážáˇ áżááá¸áś Browser áá˛áááŻááá¸áˇááŹáᏠáąááŹá¸áżááąááˇááźáŹáˇááŤáááá¸áśááḠâŚ
Page 128 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET Value
áá˝áá¸áˇááá¸áˇáášáḠáá˝áá¸áś áĽáááŹ
background-position: 2cm 2cm
ááá¸ááá¸á 2cm áá˛á áĄáąááááąá 2cm ááŻáľáá˝áá¸ááŻá ááá¸áá˝áá¸ááŹáżáá á¸ááŤááá¸á
background-position: 50% 25%
ááŤááąááŹáś
ááŹááŻááá¸áááá¸áˇáá˛á
ááźáá¸ááŹáá˛áżáá á¸ááá¸á background-position: top right
áá°ááąááŹáś áąáááŹáąááźááŻá top right left bottom ááŻááżááŽáˇáąááŹá¸áżááąááˇááŹáá˛áżáá á¸ááŤááá¸á
CSS Code (style.css) body { background-color: cyan; background-image: url("my-computer1.png"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; } h1 { color: #FF0000; background-color: #3499AB; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>This is Red Header</h1> </body> </html>
Page 129 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
ááŻáľá browser áá˛á ááŹááḠáąáĄáŹáá¸áąáżáááŻááąááŹáá¸ááźáŹáˇááŤáááá¸áśááá¸..
background
background ááąááŹáś áĄáąááá áąáżááŹáá˛ááá˛á background properties áąááźáĄáŹáˇááŻáľáˇááŻá á áŻáąááŤáá¸áˇáżááŽáˇáąáᡠáĄááŻááášá´áá¸áąááˇááŹáˇááŹáá˝áŹááŻáľáˇááŤááá¸á áąáĄáŹáá¸á፠CSS code ááŻáážááá¸áśá፠CSS Code (style.css) background-color: cyan; background-image: url("my-computer1.png"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; áĄáąááá code áąááźáĄáŹáˇááŻáľáˇááŻá áąááŤáá¸áˇáżááŽáˇáąááˇááŻáááááŤááḠ.. CSS Code (style.css) {background property} body { background: cyan url("my-computer1.png") no-repeat fixed right bottom; } h1 { color: #FF0000; background-color: #3499AB; } HTML Code (index.html) <html> <head>
Page 130 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>This is Red Header</h1> </body> </html>
ááŽáąááŹáá¸ááŻáááá¸áąááŹáś background áá˛á Compiling áĄáąážááŹáá¸áˇááŻá áááąááŹáá¸áżáᎠááá¸ááŤááá¸á
Fonts CSS áá˝áŹ áĄáášáłááˇáášáłááˇáąáᏠfont áąááźááŻáááá¸ááŻáááá¸áśááźáá¸áˇáĄááŻáľáˇáżááłááá¸ááŻááᏠáááá˝áááá¸áĄááźáá¸áá˛áżáá á¸ááá¸á Property
áá˝áá¸áˇááá¸áˇáášáḠáá˝áá¸áś áĽáááŹ
font-family
font-family
ááąááŹáś
CSS
áá˝áŹáá˝áźáá¸áąááŹá¸ááŻááá
font
áąááźááŻá
áĽáŽáˇá áŹáˇáąááˇ
ááá¸áá˝áá¸ááŹááŤáᲠ.. web programmer áąááˇááŹáˇáá˛á ááááĽáŽáˇá áŹáˇáąáᡠfont á user áá˛á á áá¸áá˛áá˝áŹ ááá˝áááḠááŻááá áĽáŽáˇá áŹáˇáąáᡠfont ááŻááĄááŻáľáˇáżááłááŻááá¸áąáĄáŹáá¸ááŻááááŤá áá°ááá˝áŹ family-name áá˛á generic-family ááŻááżááŽáˇ áá˝á á¸ááŻáá˝áááŤááá¸âŚ Family-name ááąááŹáś Times New Roman, Arial , Verdana, Tahoma á ááá¸áś font áĄááá¸áąááźáá˛áżáá á¸ááŤááá¸á Generic family ááŻáááŹááąááŹáś Times New Roman, Garamond, Georgia ááŽááŻáľáˇááŻá serif ááŻááá˛á generic family áá˛áżáá á¸ááá¸á
Page 131 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
áĄááŻáľáˇáżááłááŻáľáąááˇáąááźááŻá ážááá¸áśááąáĄáŹáá¸âŚ CSS Code (style.css) {background property} h1 { font-family: arial, verdana, sans-serif; } h2 { font-family: "Times New Roman", serif; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Heading 1 written in Arial</h1> <h2>And heading 2 in Times New Roman</h2> </body> </html>
Page 132 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
áĄáąááá font-family áá˝áŹ ááááĽáŽáˇá áźáŹ arial font ááŻáážáááśá¸ááŤááá¸.. ááá¸áˇ font á áá¸áá˛áá˝áŹ ááá˝ááá˝ verdana ááŻááąáżááŹáá¸áˇááŤááá¸.. verdana ááá˝ááá°áˇááŻáááḠsans-serif áá˛á font áá á¸ááŻááŻááŻá ážááá¸áśááŤáááá¸áśááá¸âŚ font-style
áąááˇááŹáˇááŹáˇáá˛á
font
áá˛á
normal,
italic
or
oblique
á ááá¸áś
styling
áąááźááŻáááá¸áá˝áá¸ááŹá፠áĄááŻáľáˇáżááłááŻáľáąááˇáąááźááŻá ážááá¸áśááąáĄáŹáá¸âŚ CSS Code (style.css) h1 { font-family: arial, verdana, sans-serif; font-style: italic; } h2 { font-family: "Times New Roman", serif; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Heading 1 written in Arial Roman - Italic</h1>
Page 133 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET <h2>And heading 2 in Times New </h2> </body> </html>
áĄáąááá ááŻáľáá˝áŹ Heading 1 á á áŹááŻáľáˇáĄáąá áŹáá¸áˇáąááˇáąááźáżáá á¸áąáááŤááá¸ááśá¸ááḠ⌠font-variant
á áŹááŻáľáˇáĄážááŽáˇáąááźáá˛áá˝
áąáá˝áááŻáľáˇá áŹááŻáľáˇáá á¸ááŻááŻá
size
áĄážááŽáˇáá˛ááąááˇáżááŽáˇ
áąááŹáá¸ááŻáľáˇá áŹááŻáľáˇááŻááąááźááŻá size áĄáąááˇáá˛ááąááˇááŹáá˛áżáá á¸ááá¸á ááá˝áá¸áˇááḠáąáĄáŹáá¸á ááŻáľááŻáážááá¸áśááŻááá¸ááŤâŚ
áĄáąááá ááŻáľáĄááŻááá¸áˇáąááˇááŹáˇááŻáááĄááźáá¸áᲠáąáżááŹááŹáżáá á¸ááŤááá¸á CSS Code (style.css) h1 { font-variant: small-caps; } h2 { font-variant: normal; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Heading 1 - Small Caps</h1>
Page 134 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET <h2>And heading 2 - normal</h2> </body> </html>
font-weight
á áŹááŻáľáˇáąááźááŻá normal ááŻáááááŻáḠbold ááá¸áá˝áá¸ááŻáááĄááźáá¸ááŤá CSS Code (style.css) p{ font-family: arial, verdana, sans-serif; } td { font-family: arial, verdana, sans-serif; font-weight: bold; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <table border="1" cellpadding="10"> <tr> <td>Text in bold</td> </tr>
Page 135 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET </table> <p>Normal text here</p> </body> </html>
Cell ááźáá¸áá˛á á áŹááŻáľáˇá Bold áżáá á¸áąáááŹááŻááąááźááááŤáááá¸áśááḠ.. font-size
Font áąááźáá˛á áĄááźáá¸áĄá áŹáˇááŻá ááá¸áá˝áá¸ááŻáááĄááźáá¸áá˛áżáá á¸ááḠ.. ááá¸áá˝áá¸áá˛ááąáááŹáá˝áŹ pixels ááŻáááááŻáḠpercentages ááŻáááŻáľáˇážáááŤááá¸á áąáĄáŹáá¸á CSS ááŻáážáááśá¸ááá¸ááŻáááḠem áá˛á pt ááŻáááŹáąááźááááŤááá¸ááśá¸ááḠ⌠px áá˛á pt áąááźá absolute size áąááźáżáá á¸ááá¸á % áá˛á em ááąááŹáś user áąááźáĄáąááá˛á adjust ááŻáá¸ááŻááááá˛á size áąááźáá˛áżáá á¸ááŤááá¸á
Browser á Zoom In , Zoon Out áá˛á size ááŻá áĄážááŽáˇáĄáášáá¸ááŻáá¸ááŹááŤáá˛á
Page 136 of 197
Points
Pixels
Ems
Percent
6pt
8px
0.5em
50%
7pt
9px
0.55em
55%
7.5pt
10px
0.625em
62.5%
8pt
11px
0.7em
70%
9pt
12px
0.75em
75%
10pt
13px
0.8em
80%
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET 10.5pt
14px
0.875em
87.5%
11pt
15px
0.95em
95%
12pt
16px
1em
100%
13pt
17px
1.05em
105%
13.5pt
18px
1.125em
112.5%
14pt
19px
1.2em
120%
14.5pt
20px
1.25em
125%
15pt
21px
1.3em
130%
16pt
22px
1.4em
140%
17pt
23px
1.45em
145%
18pt
24px
1.5em
150%
20pt
26px
1.6em
160%
22pt
29px
1.8em
180%
24pt
32px
2em
200%
26pt
35px
2.2em
220%
27pt
36px
2.25em
225%
28pt
37px
2.3em
230%
29pt
38px
2.35em
235%
30pt
40px
2.45em
245%
32pt
42px
2.55em
255%
34pt
45px
2.75em
275%
36pt
48px
3em
300%
CSS Code (style.css) h1 { font-size: 30px; } h2 { font-size: 12pt; } h3 { font-size: 120%; } p{ font-size: 1em; } HTML Code (index.html) <html>
Page 137 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Heading &lt;h1&gt; size 30px</h1> <h2>Heading &lt;h2&gt; size 1cm</h2> <h3>Heading &lt;h3&gt; size 120%</h3> <p>Paragraph &lt;p&gt; size 1em</p> </body> </html>
font
ááŤááąááŹáś
font
compiling
ááŤáá˛..
áĄáąáááá á¸ááŻáá˝áŹ
background
Property
ááŻáá¸áˇáááá¸áˇ Background Compile ááŻáá¸áá˛ááááŻá áĄááŻááá¸áˇ font property áá˝áŹ font compiling áá˝áŹ ááŻáá¸ááŻáááááŤááá¸á CSS Code (style.css) p{ font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; } CSS Code (style.css) {Font Compiling} p{ font: italic bold 30px arial, sans-serif; }
Page 138 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <p>This is Font Compiling</p> </body> </html>
Text á áŹááŹáˇ áżááá¸ááá¸ááááŻááá¸áˇáá˛á ááá¸ááŻááá¸áá˛á áááá á¸ááŻáá˛áżáá á¸ááŤááá¸á á áŹáąááźááŻá ááá¸áᏠalignment áąááźáżááá¸ááḠ⌠spacing áąááźáżááá¸ááá¸ááŻáááĄááźáá¸ááŻáľáˇááŹáá˛áżáá á¸ááŤááá¸á Property
áá˝áá¸áˇááá¸áˇáášáḠáá˝áá¸áś áĽáááŹ
text-indent
Microsoft Word áá˝áŹááŻá á áŹááŹáˇáąááźááŻá áĄáá˛ááŻá ááźáá¸áˇááŻáá¸áášáá¸ááá¸ááŻáááḠtext-indent ááŻáááŻáľáˇáąááˇáááŤááá¸á CSS Code (style.css) p{ text-indent: 50px; } HTML Code (index.html)
Page 139 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <p>This is Text Indent</p> </body> </html>
text-indent: 50px
text-align
á áŹááŹáˇáąááźááŻá áąááˇááá¸áᏠAlignment áĄááźáá¸ááŻáľáˇááŤááá¸á CSS Code (style.css) th { text-align: right; } td { text-align: center; } p{ text-align: justify; } HTML Code (index.html)
Page 140 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <table border="1" width="100%"> <tr> <th>Heading 1</th> </tr> <tr> <td>Cell 1</td> </tr> </table> <p>Justified text in paragraphs</p> </body> </html>
text-decoration
á áŹááŹáˇáąááźááŻá
áąáĄáŹáá¸
áá˛á
áĄáąááá
áášáĽá¸áˇááŹáˇááŹááŻáá
áĄááá¸ááąá
áżááá¸áášáĽá¸áˇááŹáˇááŻáá
áżááłááŻáá¸ááá¸ááŻáááḠááŻáľáˇáááŤááá¸á CSS Code (style.css) h1 { text-decoration: underline; } h2 { text-decoration: overline;
Page 141 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
} h3 { text-decoration: line-through; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>This text is underlined</h1> <h2>This text is overlined</h2> <h3>This text is lined trough</h3> </body> </html>
text-spacing
á áŹááŻáľáˇáá á¸ááŻáľáˇáášáá¸áˇá áŽáá˛á áĄááźáŹáĄáąážáˇááŻá ááá¸áá˝áá¸ááá¸á CSS Code (style.css) h1 { letter-spacing: 5px; } p{ letter-spacing: 30px;
Page 142 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
} HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Space between text characters</h1> <p>This is 30 px text spacing</p> </body> </html>
text-transform
á áŹááŻáľáˇáąááźááŻá Uppercase áĄáąááá˛á áąááˇáá˝áŹááŹáˇá ááŻáááááŻáḠLowercase áĄáąááá˛ááąááˇáá˝áŹááŹáˇá capitlize ááŻáááąáááá˛á áąáá˝áááŻáľáˇá Capital, áąááŹáá¸ááŻááá¸áˇá Small letter áĄáąááá˛á áąááˇáá˝áŹááŹáˇ á ááá¸áżááá¸áś ááá¸áá˝áá¸áżááá¸áˇááŻá text-transform ááŻáá¸ááá¸ááŻáááąááááŤááá¸á CSS Code (style.css) h1 { text-transform: uppercase; } li { text-transform: capitalize; } p{
Page 143 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET text-transform: lowercase;
} HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>this heading is uppercase</h1> <ul> <li>u mg tin</li> <li>aung aung</li> <li>hla hla</li> </ul> <p>This is LOWERCASE</p> </body> </html>
áĄáąááá CSS áá˛á HTML code áąááź ááŻáľáąááźááŻá ááźá˛áżááŽáˇážáááśá¸áąá áášáá¸ááŤááḠ⌠<p> tag áá˛áá˝áŹ áąááˇááŹáˇáá˛á á áŹááŻáľáˇáąááźá LOWERCASE ááŻááżááŽáˇáąááˇááŹáˇáąááá˛á text-transform áá˝áŹ lowercase ááŻáááąááˇááŹáˇáá˛á áĄááźáḠbrowser á áĄáŹáˇááľáŻáˇááŻá lowercase áá˛ááąááŹá¸áżááąááˇááźáŹáˇááŹááŤá
Link
Page 144 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS Hyperlink
áąááźááŻá
DREAM IT, CODE IT BY PLANETCREATOR .NET unvisited,
visited,
active
á ááá¸áśáĄáżááá¸
Link
áĄáąáááá˝áŹ
mouse pointer
áąááˇáąááŹáá¸áżááŽááŻáááŹáá˛á áá°áˇáżááŹáˇáá˛á ááŻáľá áľ áĄááźáá¸áĄáżááá¸áąááˇáąááź ááá¸áá˝áá¸ááá¸ááŻáááḠááŻáľáˇááŤááá¸á áá˝áźáá¸áąááŹá¸ááŻáá HTML ááŻáá¸áˇá Link áąááźáá˛á áááá¸ááŻáľáˇáá˛á tag á Anchor <a> tag áżáá á¸ááá¸áááŻáᏠáá˝áá¸áááĄáŻáľáˇáá˝áŹááŤá áąááŹáá¸áá á¸ááŻááąááŹáś name class , id class áąááźááŻáááá¸áˇ áąááźááá˛ááżááŽáˇáżáá á¸ááŤáááá¸áśááḠ⌠áĄááŻááŽáąáááŹáá˝áŹ ááľáŻáˇáá˝áŹá pseudo-class áá˛áżáá á¸ááŤááḠpseudo-class á HTML class áá˛áááŻáľáá°áąááŹá¸ááá¸áˇ áĄááŻáľáˇáżááłáá˛á áąáááŹáá˛á áĄááŻáľáˇážáá¸ááŻáľáąááˇáąááźá ááźá˛áżááŹáˇááŤááá¸á áá°á markup áá˛áá˝áŹ ááá¸áá˝áá¸áąááˇáááŹáááŻáá¸ááŤáá°áˇ á áĄáášáłáá pseudo-class áąááźá Dynamic áąááźáżáá á¸ááŤááá¸á pseudo-clas áąááźááŻá áąááˇááŹáˇáá˛ááąáááŹáá˝áŹ colon (:) áá˛áá áżááŽáˇáąááˇááŹáˇáááŤááḠ.. áąááˇááŹáˇáá˛á selector áá˛á pseudo-class áĄážááŹáˇáá˝áŹ white space áááŹáˇáááŤáá°áˇá a:link { ⎠declarations } a:visited { ⎠declarations } a:focus { ⎠declarations } a:hover { ⎠declarations } a:active { ⎠declarations } li:first-child { ⎠declarations } áĄáąááá
áĄááŻááá¸áˇáąááˇááŹáˇáááŤááá¸á
ááŤáąááźá
pseudo-class
áąááźááŤá
áąáĄáŹáá¸á
áá˝áá¸áˇáżáááááąááŹáś
Link
áąááźáá˛áááá¸ááá¸áá˛á Pseudo-class áąááźááŻááá˛áá˝áá¸áˇááźáŹáˇáá˝áŹáżáá á¸ááŤááá¸á áĄááźáá¸áˇáá˝áŹáąááˇááŹáˇááá˛á
color, background-color á ááá¸ááŻááááŻá
áĄááá¸áá˝áŹ
áá˝áá¸áˇáżááá˛ááżááŽáˇáżáá á¸áá˛ááĄááźáá¸
ááá¸ááľá
ááá˝áá¸áˇáżááąááŹáśááŤáá°áˇá Pseudo-Class for Links
áá˝áá¸áˇááá¸áˇáášáḠáá˝áá¸áś áĽáááŹ
link
User áąááźáĄáąááá˛á ááźáŹáˇáąááŹáá¸ááá¸ááá¸áá
ááá˝ááąááˇáąáᏠLink áąááźáá˛á áĄáąááŹáá¸ááŻá
ááá¸áá˝áá¸ááá¸á
Page 145 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
Syntax :link { declaration block } CSS Code (style.css) a:link { color: #0be734; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Unvisited links are light blue</h1> <p><a href="index1.html">This is a unvisited link</a></p> </body> </html>
áĄáąááá Link áá˝áŹááŻáááḠindex1.html ááŻááá˛á link ááŻáááźáŹáˇáąááŹáá¸áá˛ááá ááá˝ááá°áˇááŻáááḠCSS áá˝áŹááá¸áá˝áá¸ááŹáˇáá˛ááĄááŻááá¸áˇ link á áĄá ááá¸áˇáąááŹáá¸áżáá á¸áąáááŤáááá¸áśááḠ⌠visited
ááźáŹáˇáąááŹáá¸ááá¸ááá¸áżááŽáˇááŹáˇ Link áąááźááŻá áĄáąááŹáá¸áá˛á áąááŹá¸áżááášáá¸ááá¸ááŻáááá¸ááŻáľáˇááŤááá¸á Syntax :visited {
Page 146 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET declaration block
} CSS Code (style.css) a:visited { color: #FF0000; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Visited Links are red</h1> <p><a href="index.html">This is a visited link</a></p> </body> </html>
áĄáąááá Link áá˝áŹááŻáááḠindex.html ááŻááá˛á link ááŻáááźáŹáˇáąááŹáá¸ááá¸ááá¸áá°áˇáá˛ááá˛ááĄááźáḠáĄááŽáąááŹáá¸áąááˇáá˛á áżáá á¸áąáááŤáááá¸áśááá¸.. active
ááźáŹáˇáąááŹáá¸ááá¸ááá¸ááŻáá áĄááá¸áśáżáá á¸áąááá˛á link áá á¸ááŻááŻá click áááżááŽáˇ ááŻááá¸ááŹáˇááŻááá¸ááḠ:Syntax :active { declaration block }
Page 147 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
CSS Code (style.css) a:active { background-color: #FFFF00; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h3>Active links get a yellow background</h3> <p><a href="index.html">Click here and keep the button down</a></p> </body> </html>
áá˝áźáá¸áąááŹá¸ááŻáá áĄáąááá Link ááŻá Click ááŻááá¸ááŹáˇááŻááá¸ážááá¸áśá፠ááŤááŻáááḠááá¸áˇ Link á active áá˛á
áĄáąááĄááŹáˇáá˝áŹ
CSS
á
ááá¸áá˝áá¸ááŹáˇáá˛á
áĄážáŤáąááŹáá¸
áąááŹáá¸ááľáąááˇ
áąáááąáááŤáááá¸áśááá¸.. hover
Mouse pointer áąááˇááŻá Link áĄáąááááᯠááá¸ááŻááá¸áá˛ááĄáášááá¸áá˝áŹ font design áąáżááŹáá¸áˇááŹááŻááá áĄáąááŹáá¸áąáżááŹáá¸áˇááŹááŻáá á ááá¸áś áá°áˇáżááŹáˇáá˛á effect áąááˇáąááźááá¸áśááźáá¸áˇáżááá¸áˇáá˛áżáá á¸ááŤááá¸á Syntax :hover { declaration block
Page 148 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
} CSS Code (style.css) a:hover { color: orange; font-style: italic; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Hover effect on links!</h1> <p><a
href="index.html">Move
the
cursor
over
this
link</a></p> </body> </html>
áĄáąááá link áá˝áŹ mouse pointer ááŻáááá¸ááŻááá¸ááŹáá˛á CSS code áá˝áŹáąááˇááŹáˇáááŻá áĄáąááŹáá¸ááŻá áĄážáŤáąááŹáá¸áá˛á italicized áąááˇáżáá á¸áąáááŤáááá¸áśááá¸âŚ Note-: ááŽáá˝á á ḠáŻááá¸áˇáááŻáá¸ááŤáá°áˇá áĄáżááŹáˇ background áĄáąááŹáá¸áąááźáąáżááŹáá¸áˇááŹááŻáá image áąááźáąáżááŹáá¸áˇááŹá text-spacing áąááźáąáżááŹáá¸áˇáᏠá Uppercase, Lowercase áąáżááŹáá¸áˇáᏠá ááá¸áżááá¸áś áąááŹá¸áąááŹá¸áášáŹáˇáášáŹáˇááŻáľáˇááŻáááááŤááá¸á
Page 149 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
Link áá˛á áąáĄáŹáá¸á Line
áá˝áźáá¸áąááŹá¸ááŻáá
áĄáąááá
ááŻáľáąááźááŻááá¸áˇááŻá
áááááŹáˇáżááŽáˇážááá¸áśááá¸ááŻáááá¸
link
ááŤáá˛á
ááŻáááá¸áá˝áŹáˇáżááá¸áˇ
á ááŹáˇáąááźááŻááá¸áˇáá˝áŹ underline áąááˇáąááź áżáá á¸áąáááŤáááá¸áśááá¸âŚ áĄááá¸á áá˝áźáá¸áąááŹá¸ááŻááá ááá¸áˇ line ááŻááážáááłáá¸ááŻáá ááá¸ááŹáˇáášáá¸ááá¸ááŻáááḠááá¸ááŻáááááŤááá¸á Syntax a{ declaration block } CSS Code (style.css) a{ text-decoration:none; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Remove underlining from links</h1> <p><a href="index.html">This is a example of a link without underlining!</a></p> </body> </html>
ááŤááŻáááḠline ááąáááąááŹáśááŤáá°áˇá
Page 150 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
áĄááá¸á property áá á¸ááŻáášáá¸áˇá áŽáĄááźáá¸áˇáá˝áŹ ááá¸áá˝áá¸ááá¸ááŻáááá¸ááá¸áˇ áááŤááá¸á CSS Code (style.css) a:link { color: blue; text-decoration:none; } a:visited { color: purple; text-decoration:none; } a:active { background-color: yellow; text-decoration:none; } a:hover { color:red; text-decoration:none; } áĄááá¸á፠áĄááŻááá¸áˇáąááˇááŹáˇááá˝áŹááŤá
Identification and grouping of elements (class and id) áąááŤáá¸áˇá áĽá¸áąááź áĄáášáŹáˇážááŽáˇáá˛á áąááŤáá¸áˇá áĽá¸áá á¸ááŻááŻááżáá á¸áąá á Categories áąááźáĄáášáŹáˇá áŻáá˛á ááááááá¸áá˝áá¸ááŻáááá˛á category áá á¸áᯠááŻáááááŻáá¸á áá á¸á ᯠááŻááżáá á¸áąá ááŽáˇááá¸áááźá˛áżááŽáˇááá¸áá˝áá¸áášáá¸ááá¸ááŻáááḠááŻáľáˇáąááˇáááŤááá¸á áĽáááŹáąáᡠááŻáážááá¸áśááŻááá¸ááŹá ááŻááżááŽáˇáá˝áá¸áˇááŤáááá¸áśááá¸âŚ Identification
áá˝áá¸áˇááá¸áˇáášáḠáá˝áá¸áś áĽáááŹ
of Elements class
áĄáąáááá˝áŹ áá˝áźáá¸áąááŹá¸ááŻáá class áá˛á id áĄáąážááŹáá¸áˇááŻá áĄááŻááá¸áĄáąáášáŹáḠáá˝áá¸áˇáżááá˛ááżááŽáˇááá¸áˇáżáá á¸ááŤááḠ.. áĄáᯠclass ááŻáááá¸ááŻáááŻáľáˇááá¸ááŻááᏠáąááŹá¸áżáááŹáˇááŤááá¸á áá˝áźáá¸áąááŹá¸ááŻáááá˝áŹ áąáĄáŹáá¸ááŤáĄááŻááá¸áˇ red wine áá˛á white wine ááŻááżááŽáˇ ááá°ááŽáá˛á grapes wine
Page 151 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
áá˝á á¸ááŻáá˝áááá¸ááŻáážáááŤá áŻáá ⌠<p>Grapes for white wine:</p> <ul> <li><a href="ri.htm">Riesling</a></li> <li><a href="ch.htm">Chardonnay</a></li> <li><a href="pb.htm">Pinot Blanc</a></li> </ul> <p>Grapes for red wine:</p> <ul> <li><a href="cs.htm">Cabernet Sauvignon</a></li> <li><a href="me.htm">Merlot</a></li> <li><a href="pn.htm">Pinot Noir</a></li> </ul> ááŤááŻá áá˝áźáá¸áąááŹá¸ááŻááá white wine áĄá áŻááŤáá˛á link áąááźááŻá áĄážáŤááá¸áśáąááŹáḠáĄáżáá á¸á áŻááá¸âŚ red wine áąááźááŻá áĄááŽáąááŹáḠáĄáżáá ḠáąááŹá¸áżááášáá¸ááá¸ááŻáááḠclass attribute áá˛áááŻáľáˇááŤááá¸á CSS Code (style.css) a{ color: blue; } a.whitewine { color: #FFBB00; } a.redwine { color: #FF0000; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body>
Page 152 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET <p>Grapes for white wine:</p> <ul> <li><a href="ri.htm" class="whitewine">Riesling</a></li> <li><a href="ch.htm" class="whitewine">Chardonnay</a></li> <li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li> </ul> <p>Grapes for red wine:</p> <ul> <li><a
href="cs.htm"
class="redwine">Cabernet
Sauvignon</a></li> <li><a href="me.htm" class="redwine">Merlot</a></li> <li><a href="pn.htm" class="redwine">Pinot Noir</a></li> </ul> <p>This is an example of a <a href="dok.htm">link without any class</a> - it is still blue.</p> </body> </html>
ááŻáľáá˝áá¸áĄáŹáˇáżááá¸áś link áąááźááŻááá¸áˇá áĄáżááŹáąááŹáá¸áąááźáá˛áżáá á¸ááá˝áŹááŤâŚ ááŹáąážááŹáá¸áśáá˛ááŻááąááŹáś a ááŻááá˛á selector áá˝áŹ color ááŻá áĄáżááŹáąááŹáá¸áąááˇááŹáˇááá¸áąá..á ááŤáąááá˛á áĄá˛ááĄáá˛ááá˝áŹ áá˝áźáá¸áąááŹá¸ááŻááá ááŽáˇááá¸áááźá˛áżááŽáˇ class
attribute
ááŻáááŻáľáˇááŹ
áĄážáŤááá¸áśáąááŹáá¸áĄá áŻ
áá á¸ááŻáá˛á
áĄááŽáąááŹáá¸
áĄá áŻáá á¸ááŻááŻááááŻá
ááá¸ááŽáˇááŻááá¸ááŹáżáá á¸ááŤááá¸á id
id class áĄááźáḠid selector áá˛á id selector ááŻááąááˇááŹáˇááḠâ#â sign áąááˇááľáżááŽáˇáąááˇáááá¸ááŻááᏠID Selector ááŻááá˛á áĄááá¸áá˝áŹ áá˝áá¸áˇáżááá˛ááżááŽáˇááŤáżááŽá CSS Code (style.css)
Page 153 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
#c1-2 { color: red; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1 id="c1">Chapter 1</h1> <h2 id="c1-1">Chapter 1.1</h2> <h2 id="c1-2">Chapter 1.2</h2> <h1 id="c2">Chapter 2</h1> <h2 id="c2-1">Chapter 2.1</h2> </body> </html>
áĄáąááá áĽáááŹááŻáážááá¸áśááá¸ááŻáááḠHTML áá˝áŹ chapter 1, 1.1, 1.2, 2 á ááá¸áżááá¸áś áá°ááŻááááŻá id class áąááˇááŹáˇááá¸áá˝áá¸ááá¸áĄááźáḠcss áá˝áŹ id selector áá˛ááąááˇááŹáˇááŹáá˛áżáá á¸ááŤááá¸á ááŤáąážááŹáá¸áś áąááˇááŹáˇáá˛á class áá˛á value áąááźáááá¸áˇ ááá°ááŽáááŤáá°áˇá
Grouping of elements (span and div)
Page 154 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
ááŽáá á¸ááŤáąááŹáś áĄáąááá span áá˛á div áĄáąážááŹáá¸áˇááŤáᲠ⌠HTML áá˝áŹ áá˝áá¸áˇáżáááŹáˇááŻáá áá°ááŻááááŻá ááąááŹáąááŤáḠáąááąááŹáá¸ááŤáżááŽ.. ááŤáąááá˛á CSS áá˝áŹááŻáááḠááŤáąááźááŻá class áá˛á id attribute
áąááźáá˛á ááźá˛áżááŽáˇááŻáľáˇááŻáľ ááŻáľáˇááá¸áˇááŻááąááŹá¸
áżááąááˇááźáŹáˇáá˝áŹááŤá Grouping
áá˝áá¸áˇááá¸áˇáášáḠáá˝áá¸áś áĽáááŹ
with <span>
span tag ááŻá class attrribute áá˛á ááźá˛áżááŽáˇááŻáľáˇáᏠáášáŹáˇááŤááá¸á CSS Code (style.css) span.benefit { color:red; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <p>Early
to
bed
and
early
to
rise
makes
a
man
<span
class="benefit">healthy</span>, <span class="benefit">wealthy</span> and <span class="benefit">wise</span>.</p> </body> </html>
ááŤááŻáááḠá áŹáąážááŹáá¸áˇáá á¸áąážááŹáá¸áˇááŻáľáˇ áĄááźáá¸áˇáá˝ ááááááŻáá áąááźáˇáášáá¸ááŹáˇáá˛á á ááŹáˇá áŻáąááˇááŻá span tag ááŻáááŻáľáˇáżááŽáˇ áĄáąááŹáá¸ááźáá¸áˇááźáŹáˇááŹáá˛áżáá á¸ááŤááá¸á <div>
ááŽáĄááŤáąááŹáś div ááŻáááŻáľáˇáżááŽáˇ Elements áąááźááŻá Group ááźá˛áááŤááá¸á áĄááľáŻáˇáżááłááŻáľáąááˇááŻá áąáĄáŹáá¸áá˝
Page 155 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
áąááŹá¸áżáááŹáˇááŤááá¸á CSS Code (style.css) #democrats { background:blue; } #republicans { background:red; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="democrats"> <ul> <li>Franklin D. Roosevelt</li> <li>Harry S. Truman</li> <li>John F. Kennedy</li> <li>Lyndon B. Johnson</li> <li>Jimmy Carter</li> <li>Bill Clinton</li> </ul> </div> <div id="republicans"> <ul> <li>Dwight D. Eisenhower</li> <li>Richard Nixon</li> <li>Gerald Ford</li> <li>Ronald Reagan</li> <li>George Bush</li> <li>George W. Bush</li> </ul>
Page 156 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET </div>
</body> </html>
Democrats áĄá áŻáá˛á Republicans áĄá áŻáąááźááŻá áąááŹáá¸ááľ áĄáżááŹáá˛á áĄážáŤ áąááŹáá¸ááľáĄáąááŹáá¸áąááˇáąááź ááá¸áá˝áá¸ááŻááá¸ááŻáá div tag áá˛á id attribute ááŻáááŻáľáˇááŹáˇááŤááá¸á CSS áá˝áŹáąááŹáś id selector áąááŤá.
The box model Professional Web page
áąááźááŻá áżáá á¸áąááááŻáááĄááźáḠCSS áá˛á Layout áąááŹáá¸áˇáááááá¸áˇ áĄáąááˇááŤáá˛á
áĄááá¸áˇááááąáááŤážáá¸áąáááŤááá¸.. ááŤáąážááŹáá¸áśáᲠCSS ááŻááᏠStyling and Layout áĄááźáá¸áᲠááŻááżááŽáˇ áá°áááášáŹáˇážáááŹááŤá ááŤááŻáááá¸
áĄááŻ
ááŽáąáááŹáá˝áŹ
margin,
border,
padding and content
áąááźááŻá
áĄá áŽáĄá áĽá¸ááášááŻáľáˇááá¸ááŻáá
áĄáąááˇážááŽáˇááŤááá¸á ááŤáᏠCSS áá˛á áĄáąááˇááŤáá˛á áĄááŻááá¸áˇááŤáá˛á The box model ááŻá áĄááŻáľáˇáżááłááá¸ááŻáááĄááźáḠáąáĄáŹáá¸á፠structure ááŻá áżáá˛áżáá˛áá˝áá¸ááŹáˇááŹáˇááŻááááŻáááŤááá¸á
Page 157 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
ááŽáĄááŤáąááŹáś div ááŻáááŻáľáˇáżááŽáˇ Elements áąááźááŻá Group ááźá˛áááŤááá¸á áĄááľáŻáˇáżááłááŻáľáąááˇááŻá áąáĄáŹáá¸áá˝ áąááŹá¸áżáááŹáˇááŤááá¸á CSS Code (style.css) h1 { color: #0000FF; margin-top: 10px; margin-right: 255px; margin-bottom: 8px; margin-left: 30px; } p{ color:#FFAA66; margin-top: 3px; margin-right: 30px; margin-bottom: 3px; margin-left: 30px; padding-left: 70px; }
HTML Code (index.html)
Page 158 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Article 1:</h1> <p>All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood</p> </body> </html>
áĄáąááá Source Code áá˛á Result ááŤá
Page 159 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
áĄáąááá ááŻáľááŻá ážááá¸áśááŻáľáá˛á margin, padding, border áá˛á content áąááźáĄáąážááŹáá¸áˇááŻá áááąááŹáá¸áżáᎠááá¸ááŤááá¸á
Margin
á áŹááŹáˇáąááźááŻááá¸áááśá¸ááŹáˇáá˛á áĄá áźáá¸ááŻáľáˇ áĄááŻááá¸áˇáá˛áżáá á¸ááŤááá¸á Margin áá˝áŹ right, left, top and bottom áááŻáżááŽáˇáá˝áááŤááá¸á
Page 160 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
CSS Code (style.css) body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px; }
áąáĄáŹáá¸ááŤáĄááŻááá¸áˇááá¸áˇáąááˇááŹáˇááŻáááááŤááá¸á CSS Code (style.css) body { margin: 100px 40px 10px 70px; }
ááŤáᏠááŹááŽááá¸ááľ ááá¸ááá¸ááŻáľáĄááŻááá¸áˇááŤáá˛âŚ top, right, bottom, left ááŻááżááŽáˇááźáŹáˇááŤááá¸á
Padding
Border áá˛á elements áąááźážááŹáˇáĄááźáŹáĄáąážáˇááŻá ááá¸áá˝áá¸ááŹáá˛áżáá á¸ááŤááá¸á CSS Code (style.css) h1 { background: yellow; padding: 20px 20px 20px 80px; } h2 { background: orange; padding-left:120px; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Header 1</h1> <h2>Header 2</h2> <p>All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards
Page 161 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
one another in a spirit of brotherhood</p> </body> </html> padding: 20px 20px 20px 80px;
padding-left:120px;
áĄáąááá
Header
1
áá˛á
Header
áĄáá˛ááŻááąááŹáá¸áąáááŹáąááźááááŤáááá¸áśááḠâŚ
2
áąááźááŻáážááá¸áśááŤ.. padding
padding
ááŻáááŻáľáˇááŹáˇáá˛ááĄááźáá¸
ááŻáááŻááżááŽáˇáąááááźáá¸áąáĄáŹáá¸ááŻáá
ááá¸áˇááŻáá
áá˝á á¸ááŻá
áąááŹáá¸ááľáĄáąááŹáá¸áá˛áááá¸áśáżááŽáˇ
áąááŹá¸áżáááŹáˇááŹááŤá
Borders
Web Content
áąááźááŻá áĄááŹáˇáąááŹáá¸áąááź ááá¸ááŻáááĄááźáḠááŻáááááŻáḠáąááŹáá¸áąááźááŻá áá˝áá˝áá
áżááá¸ááá¸ááŻáá ááŻáá¸ááá¸âá¸ááŻáááḠborder ááŻáááŻáľáˇáąááˇáááŤááá¸á ááá¸áˇááŻáááĄáŹáˇ border áá˛á width , border áá˛á style áá˛á border áá˛á áĄáąááŹáá¸áąááźááŻááżááŽáˇ ááźá˛áżááŹáˇáĄááŻáľáˇáżááłááźáŹáˇááŻááá¸ááŤááá¸á Borderâs Properties
áá˝áá¸áˇááá¸áˇáášáḠáá˝áá¸áś áĽáááŹ
border-width
Border
áá˛á
áĄáá°áĄááŤáˇááŻáááá¸áá˝áá¸ááá¸á
ááá¸áˇáĄáŹáˇ
thin,
medium áá˛á
thick
ááŻááżááŽáˇáąááˇááŹáˇááŻááááááŻá px áá˛áááá¸áˇ ááá¸áá˝áá¸ááŻáááááŤááá¸á
CSS Code (style.css) h1 { border-width: thick;
Page 162 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET } h2 { border-width: 20px; }
border-color
Border áá˛á áĄáąááŹáá¸ááŻá ááá¸áá˝áá¸ááá¸á áĄáąááŹáá¸áĄáŹáˇ Color áĄááḠ{Cyan, Yell, etc⌠} (ááŻáááááŻáá¸) color áá˛á hex code {#123456} (ááŻáááááŻáá¸) rgb color { rgb(123,123,123)} áá˛ááąááˇááŻáááááŤááá¸á CSS Code (style.css) h1 { border-color: gold; } h2 { border-color: #FFFF00; }
border-style
áá˝áźáá¸áąááŹá¸ááŻáá
ááá¸áá˝áá¸ááŻááá¸áá˛á
border
áá˛á
ááŻáľá áľááŻááąáżááŹááŹááŤá
dotted
line
áá˛áááŹáˇáá˝áŹááŹáˇ, dashed line áá˛áááŹáˇ á ááá¸áżááá¸áś ááá¸áá˝áá¸ááŻááá¸ááŤááá¸á áá°ááŻáááá˛á value áąááźááąááŹáś dotted, dashed, solid, double, goove, ridge, inset, outset áąááźáá˛áżáá á¸ááŤááá¸á
Page 163 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
CSS Code (style.css) h1 { border-style: dotted; } h2 { border-style: outset; }
Border áĄáŹáˇ compile ááŻáá¸áąááˇááá¸ááŻáááá¸ááá¸áˇáááŤááá¸á p { border-width: 1px; border-style: solid; border-color: blue; }
áąáĄáŹáá¸ááŤáĄááŻááá¸áˇ áąááˇááŹáˇááŻááá¸ááŤááá¸á p {
Page 164 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
border: 1px solid blue; }
Borders áĄááźáḠáĽááᏠ:CSS Code (style.css) h1 { border-width: thick; border-style: dotted; border-color: gold; } h2 { border-width: 20px; border-style: outset; border-color: red; }
ááŤááĄáżááḠtop-, bottom-, right- or left borders ááŻááżááŽáˇ special properties
áąááźáááśá¸ááźáá¸áˇááŻáá
áááŤáąááˇááá¸.. CSS Code (style.css) h1 { border-top-width: 20px; border-top-style: solid; border-top-color: red;
Page 165 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
border-bottom-width: 20px; border-bottom-style: solid; border-bottom-color: blue; border-right-width: 20px; border-right-style: solid; border-right-color: green; border-left-width: 20px; border-left-style: solid; border-left-color: orange; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Header 1</h1> <p>All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood</p> </body> </html>
Page 166 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
ááŤááŻáááḠáá˝áźáá¸áąááŹá¸ááŻááá áąááˇááŹáˇáá˝áááḠáąááˇááŹáᏠááá¸áá˝áá¸ááŻáááááá¸áąááŤá⌠Height and Width
Elements áąááźááŻá box áá˛áá˝áŹ áĄáášáŹáˇ áĄááľ ááźáá¸áášáá¸áżááŽáˇ áąáááŹáášááá¸ááŻáááá¸ááŻáľáˇááŤááá¸á ááŽáĄááźáḠ<div> tag áá˛á class attribute áąááźááŻáááŻáľáˇááŤááá¸á áąáĄáŹáá¸á፠áĽáááŹááŻáážááá¸áśááŤá CSS Code (style.css) div.box { height: 200px; width: 400px; border: 1px solid black; background: orange; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Header 1</h1>
Page 167 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<div class="box">All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood</div> </body> </html>
áĄáášáŹáˇ 400px áá˛á áĄááľ 200px áá˝ááá˛á box áá˛áá˝áŹ á áŹááŹáˇáąááźááŻá áąááŹá¸áżááąááˇááŹáˇááŹáá˛áżáá á¸ááŤááá¸âŚ Floating
Magazine
áá˛á
á áŹáąá áŹáá¸áąááźáá˝áŹ
áąááŹá¸áżááąááá˛ááĄááŻááá¸áˇ
ááŻáľááŻá
ááá¸
ááŻáááááŻáá¸
ááŹááŹáˇáá˝áŹáąááźá
ááŹáˇááŻáááĄááźáḠáĄááŻáľáˇáżááłááŹáá˛áżáá á¸ááŤááá¸á
áąááˇááŹáˇ áĄááŻáľáˇáżááłááŻáľáąááˇááŻáážááá¸áśááŤá Page 168 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
CSS Code (style.css) #picture { float:left; width: 200px; } float: left ááŻááżááŽáˇ ááá¸ááá¸áá˛áá˝áŹ áąáááŹááŹáˇááŻáá áąáżááŹááŹáˇááŤááá¸á HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="picture"> <img src="my-computer1.png" alt="My Computer" width="150px" heigh="150px"> </div> <p>All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood. All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood.</p> </body> </html>
Page 169 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
áąááŹáá¸áá á¸ááŤ
float
DREAM IT, CODE IT BY PLANETCREATOR .NET
ááŻá
áá˝áźáá¸áąááŹá¸ááŻáá
column
áąááźááá¸áá˝áá¸
áášáá¸ááá¸ááŻáááá¸ááá¸áˇ
áĄááŻáľáˇáżááłááŻáááááŤááá¸á CSS Code (style.css) #column1 { float:left; width: 31%; background-color:#999999; padding: 10px 10px 10px 10px; } #column2 { float:left; width: 31%; background-color:#0099CC; padding: 10px 10px 10px 10px; } #column3 { float:left; width: 31%; background-color:#666600; padding: 10px 10px 10px 10px; } id class ááŻá ááŻáľáˇááŹáˇááŤááá¸á HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="column1"> <p>All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood. All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and
Page 170 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
should act towards one another in a spirit of brotherhood.</p></div> <div id="column2"> <p>All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood. All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood.</p></div> <div id="column3"> <p>All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood. All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood.</p></div> </body> </html>
áĄááŻááŹá float áá˛á column ááźá˛áá áá¸áˇááŻáľááŻá ááŻááżááá¸ááŹáąáĄáŹáá¸ááŻáá background-color áá˛á Padding áąááˇáąááźá፠ááá¸áśááźáá¸áˇáąááŹá¸áżáááŻááá¸ááŹááŤá áĄááá¸á float áááŻááášáá¸áá°áˇ ááŻáááḠclear: both; ááŻááżááŽáˇááŻáľáˇáąááˇááŻáááááŤááá¸á áąáĄáŹáá¸á፠áĽáááŹááŻáážááá¸áśááŤá CSS Code (style.css) #picture { float:left; width: 200px; }
Page 171 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
.floatstop { clear:both; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="picture"> <img src="my-computer1.png" alt="My Computer" width="150px" heigh="150px"> </div> <h1>My Computer</h1> <p class="floatstop">All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood. All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood.</p> </body> </html>
ááŤááŻáááḠááŻáľáá á¸ááŻááá¸áˇááŻááᲠfloat áżáá á¸áżááŽáˇ áá˝áźáá¸áąááŹá¸ááŻáá floating áááŻáá¸áášáá¸áá˛á á áŹááŹáˇáąááźááŻááąááŹáś áĄáąááá css áá˝áŹ .floatstop ááŻááżááŽáˇ class selector áá˛á áąáááá°áĄááŻáľáˇáżááłááŹáˇááŤááá¸á
Page 172 of 197
http://www.worldwidemyanmar.com
ááŹáá Ꮰá CONTENT Web á Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
Positioning of elements
Contents
áąááźááŻá
áąáááŹáášáá˛ááąáááŹáá˝áŹ
áá˝áźáá¸áąááŹá¸ááŻááá
browser
áĄáąáááá˝áŹ
ááááááŻáá
áá˝á á¸ááá¸áá˛ááąáááŹáá˝áŹ áĄáááĄáášáąáááŹáášááŻáááááŤááá¸.. ááŽáĄááźáḠbrowser ááŻááąáĄáŹáá¸á፠áĄááŻááá¸áˇ grid áąááˇáąááźáá˛á á ááá¸áá˛áá˝áŹ áąááˇááźá˛áżááŽáˇ ážááá¸áśááąáĄáŹáá¸
ááŽáąáááŹáá˝áŹ áá˝áźáá¸áąááŹá¸ááŻááá Headline ááŻááá˛á content áá á¸ááŻááŻá áąáááŹáášááá¸ááŻáááŤá áŻâŚ áá
ááŤááŻá áá˝áźáá¸áąááŹá¸ááŻááá áĄáąááááŻááá¸áˇááŻá 100 px áá˛á ááá¸ááá¸áąááˇááŻá 200 px ááŻááá˛ááąáááŹáá˝áŹ ááŹáˇááá¸ááŻáááḠCSS áá˝áŹ áąáĄáŹáá¸ááŤáĄááŻááá¸áˇáąáááŹáášáááŤááá¸á h1 { position:absolute; top: 100px; left: 200px; }
áąáĄáŹáá¸ááŤáĄááŻááá¸áˇ ááźáá¸ááŹááŤáááá¸áśááá¸âŚ
Page 173 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
áĄááŻááŻááąáááŹáášáá˛ááąááĄááŤáá˝áŹ
DREAM IT, CODE IT BY PLANETCREATOR .NET
Absolute
áá˛á
Relative
ááŻááżááŽáˇáá˝áááŤááá¸á
ááá¸áąááźááá˛á
áá˝áĽá¸ážááá¸áśááá¸
ááŻááżááŽáˇááąááŹáąááŤáá¸áá˝áŹááŤá Absolute Example CSS Code (style.css) #box1 { position:absolute; top: 50px; left: 50px; background: #FA7C00; width: 50px; height:50px; padding:2px; border: 1px solid black; font-family:arial; } #box2 { position:absolute; top: 50px; right: 50px; background: #FFFF00;
Page 174 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
width: 50px; height:50px; padding:2px; border: 1px solid black; font-family:arial; } #box3 { position:absolute; bottom: 50px; right: 50px; background: #00FF00; width: 50px; height:50px; padding:2px; border: 1px solid black; font-family:arial; } #box4 { position:absolute; bottom: 50px; left: 50px; background: #00FFFF; width: 50px; height:50px; padding:2px; border: 1px solid black; font-family:arial; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body>
Page 175 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<div id="box1">Box 1</div> <div id="box2">Box 2</div> <div id="box3">Box 3</div> <div id="box4">Box 4</div> </body> </html>
Absolute á div box áąááˇáąááźááŻá áĄá áŽáĄá áĽá¸áĄááŻááá¸áˇ left-up, right-up, right-bottom, left-bottom ááŻááżááŽáˇ á áĽá¸áąááˇááźáŹáˇááŤááá¸á Relative ááąááŹáś áĄá˛áááŻáááŻáľáááŻáá¸ááŤá
Relative Example CSS Code (style.css) #dog1 { position:relative; left: 350px; bottom: 10px; } #dog2 { position:relative; left: 450px; bottom: 100px; } #dog3 { position:relative; left: 50px;
Page 176 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
bottom: 100px; } HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>My Computer</h1> <div id="dog1"><img src="images/dog1.gif"></div> <p>All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood. All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood.</p> <div id="dog2"><img src="images/dog2.gif"></div> <p>All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood. All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood.</p> <div id="dog3"><img src="images/dog3.gif"></div> <p>All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood. All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood.</p> </body> </html>
Page 177 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
áĄáąááá CSS code áá˝áŹážááá¸áśááḠcontent áá˛á image ááŻáááá˛á áĄááźáŹáĄáąážáˇááŻá ááá¸áá˝áá¸ááŹáˇááŤááḠ.. ááŻááá˛áááŻá ááá¸áá˝áá¸áášáá¸á content áĄáąáááá˝áŹ ááááá¸áżááŽáˇáąááŹáś áąááᏠáĄáąááĄááŹáˇáąáżááŹáá¸áˇáá˛ááźáŹáˇááŤáááá¸áśááḠ⌠áĄááá¸á፠áĽáááŹááŻá ááŻááá¸ááŻááḠááá¸áśááźáá¸áˇáżááŽáˇ browser áĄáŹáˇ áášá´áľááášá˛áááŻáá¸ážááá¸áśááŤá
z-index (Layers) áĄááźáŹááŻááḠáĄá áŽáĄá áĽá¸áááš á áĽá¸ááá¸ááŻáááḠz-index ááŻáááŻáľáˇáąááˇáááŤááá¸á ááŻáááŻáááŹá ááḠcontent á ááḠcontent áąáá ááá¸áżááŽáˇááá¸ááḠ⌠áżááŽáˇááḠááḠcontent ááŻá áąáá˝áááŻáľáˇááŻá ááá¸ááá¸.. áąááŹáá¸ááŻáľáˇááŻáááá¸ááá¸ááŻáááŹááŻá ááá¸áá˝áá¸ááŻáááĄááźáá¸áá˛áżáá á¸ááŤááá¸á
ááá¸ááŻááˇáĄááá¸ááŻáľáˇ index á áąáĄáŹáá¸ááŻáľáˇáá˝áŹáżáá á¸áżááŽáˇ áĄážááŽáˇááŻáľáˇááąááŹáś áĄáąááááŻáľáˇáá˝áŹáżáá á¸ááŤááá¸á CSS Code (style.css) #ten_of_diamonds {
Page 178 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
position: absolute; left: 100px; top: 100px; z-index: 1; } #jack_of_diamonds { position: absolute; left: 115px; top: 115px; z-index: 2; } #queen_of_diamonds { position: absolute; left: 130px; top: 130px; z-index: 3; } #king_of_diamonds { position: absolute; left: 145px; top: 145px; z-index: 4; } #ace_of_diamonds { position: absolute; left: 160px; top: 160px; z-index: 5; } HTML Code (index.html) <html>
Page 179 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>Royal Flush</h1> <div id="ten_of_diamonds"> <img src="images/diamonds_10.gif" alt="10 of diamonds"> </div> <div id="jack_of_diamonds"> <img src="images/diamonds_jack.gif" alt="Jack of diamonds"> </div> <div id="queen_of_diamonds"> <img src="images/diamonds_queen.gif" alt="Queen of diamonds"> </div> <div id="king_of_diamonds"> <img src="images/diamonds_king.gif" alt="King of diamonds"> </div> <div id="ace_of_diamonds"> <img src="images/diamonds_ace.gif" alt="Ace of diamonds"> </div> </body> </html>
Page 180 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
áĄááá¸á King áá˛ááŻá ááĄáąááááŻáľáˇááŻá ááá¸áášáá¸ááá¸ááŻáááḠz-index: 4 áĄáŹáˇ 6 ááŻááżááŽáˇáąáżááŹáá¸áˇááŻááá¸ááḠáĄáąááááŻáľáˇááŻááąááŹáá¸ááźáŹáˇááŤáááá¸áśááá¸á -------------------------------------------------------xxx CSS xxx----------------------------------------------------------
Creating Web Design HTML + CSS HTML áá˛á CSS ááŻááąááŤáá¸áˇáżááŽáˇ Web Page ááá¸ááŽáˇááá¸
áĄááŻáĄáášááá¸áá áżááŽáˇáąááŹáś áĄáąááá áá˝áźáá¸áąááŹá¸ááŻáá áąááśááŹáá˛áááŹáąááźááŻááąááŤáá¸áˇáżááŽáˇáąááŹáś Web Page
áąááˇáąááź
ááá¸ááŽáˇ ážááá¸áśááŤááá¸á
Final Result :- ááŻáá¸áąááŹáá¸ááŹáˇáá˛á ááŻáľááŻá áĽáááŹáá°áżááŽáˇáąááŹáś áĄá˛ááĄááŻááá¸áˇ ááá¸ááŽáˇááŻááá¸áąáĄáŹáá¸ááŤá
Page 181 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
áĄáąááá ááŻáľááŻá ááááĽáŽáˇá áźáŹ áá˝áźáá¸áąááŹá¸ááŻáá ážáááśá¸ááá˝áŹá áᎠWeb Page áá˝áŹ ááŹáąááźááŤážáá¸ááᲠá ááá¸ááŻááĄááá áĄááŻááá¸áˇáąááź ááŤážáá¸ááá˛ááŻáááŹááŻá áĄááá¸ááŻáľáˇá á á¸ážááá¸áśááŻááá¸ááŤá áĄáᯠáá˝áźáá¸áąááŹá¸ áąááźáˇááŻáá¸áżáááźáŹáˇááŤááḠ⌠áż. Header áááśá¸ááźáá¸áˇááŹáˇáá˛á Header Container á. Menu ááá¸áśááźáá¸áˇááŹáˇáá˛á Menu Container á. Content ááá¸áśááźáá¸áˇááŹáˇáá˛á Content Container á. ááŹááá¸áá˛á Right Navigation á. Footer ááá¸áśááźáá¸áˇááŹáˇáá˛á Footer Container ááŻááżááŽáˇ áĄááá á ááŻáá˝áááŤááá¸á áąááŹáá¸áá á¸áᯠáá˝áá¸ááŹáˇááá˝áŹá ááŤááŻá Column áá˝á á¸ááŻáá˝ááá˛á Web Page ááŻáááŹááá¸áˇ ááááŹáˇáááá¸á Main Content áąááźáááśá¸áá˛á Column áá˛á ááŹááá¸áá˛á Navigation Column ááŻááżááŽáˇáąááŹáśáąááŤá⌠ááááĽáŽáˇááŻáľáˇ HTML ááŻáá ááá¸áąááˇááŤááḠ.. HTML áá˝áŹ ááŻááĄáá¸áá˛á elements áąááźááŻá ááá¸áśááŤááá¸á HTML Code (index.html) <html> <head> <title>CSS by WWM</title>
Page 182 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<link rel="stylesheet" type="text/css" href="style.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> </body> </html> External CSS ááŻáááŻáááĄááźáḠ<link rel=âstylesheetâ á ááá¸áżááá¸áśáąááˇááŹáˇááŤááá¸á áąááŹáá¸áá á¸ááŻá áá˝áźáá¸áąááŹá¸ááŻáá áżááá¸ááŹá áŹáĄááźáá¸
character
set
ááá¸áśáąááˇáááŤááḠâŚ.
Unicode
áąááŤáâŚ
UTF-8
ááŻááżááŽáˇ
meta
tag
áá˛áá˝áŹ
áąááŹá¸áżááąááˇááŹáˇááŹááŤá áąááŹáá¸áá á¸ááá¸áśáá˝áŹ áá˝áźáá¸áąááŹá¸ááŻáá Header Container áá˛á Header ááŻá <body> tag áĄááźáá¸áˇáá˝áŹ ááŻáľáąááŹá¸ áąááˇááŹáˇááŤááá¸á HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id="head-container"> <div id="header"> <h1>World Wide Myanmar</h1> </div> </div> </body> </html> Container ááŻááᏠContent áąááźááŻá ááá¸áśááźáá¸áˇááŹáˇáᏠáżáá á¸ááá¸ááŻáá áąááŹá¸áżááá˛ááżááŽáˇááŤáżáᎠ⌠áżááŽáˇááḠáąááŤáá¸áˇá áĽá¸ááŻá <h1> áĄáá˛áá˝áŹ ááá¸áśááŤááá¸ááżááŽáˇááḠid attribute áĄááźáḠCSS id selector ááŻá CSS file áá˛áá˝áŹ áąááˇááŹáˇááŻáááᏠstyle.css ááŻááá˛á ááŻááá¸áá á¸ááŻááᯠááá¸ááŽáˇááŤááá¸âŚ Notepad ááźáá¸áśáżááŽáˇ New áá˛áááźáŹáˇáżááŽáˇ style.css ááŻááżááŽáˇáááá¸áˇááŻááá¸ááŻáľááŤáá˛á style.css áá˛áá˝áŹ CSS Code (style.css) body,td,th { font-family: Zawgyi-One; } h1,h2,h3,h4,h5,h6 {
Page 183 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
font-family: Zawgyi-One; } #head-container { color: #000; background: #ccc; } #header { margin: 0 auto; width: 860px; padding: 20px; background: #ddd; } #header h1 { margin: 0; } áĄáąááááŻáľáˇá body, td, th áá˛áá˝áŹ ááá¸áá h1-h6 áá˛áá˝áŹ font-family áąážááŹáżááŹááŹáˇááŤááḠ.. ááŤá áá˝áźáá¸áąááŹá¸ááŻáá áĄááŻáľáˇáżááłááá¸áś font ááŻááąáżááŹááŹááŤ.. áĄáᯠáá˝áźáá¸áąááŹá¸ááŻááá Zawgyi-One ááŻáááŻáľáˇáá˝áŹáżáá á¸áá˛ááĄááźáḠfont-family: ZawgyiOne; ááŻááżááŽáˇááá¸áśááźáá¸áˇáąááˇááŹáˇááŹááŤá Header Container ááŻá áąááŹáá¸ááľáĄáąááŹáḠ#ccc ááá¸áˇáąááŹáá¸áˇá Header áĄáŹáˇ áąááŹáá¸ááľáĄáąááŹáḠ#ddd áá°á ááá¸áˇáąááŹáá¸áˇ áąááˇááŹáˇááŤááá¸á Header áĄáášáá¸ááŻááąááŹáś 860px ááŻááżááŽáˇ ááŻáľáˇááŹáˇááŤááá¸á áąááŹáá¸ááŻáľáˇáá á¸ááŻááąááŹáś header áá˝ h1 áá˛á á áŹááŹáˇááŻá margin áĄáŹáˇ 0 áĄáżááá¸áśáąááˇááŹáˇááŤááá¸á áąááŹáá¸áá á¸ááá¸áśááá¸ááŤááá¸á Menu áĄááźáá¸áá˛áżáá á¸ááŤááá¸á HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head>
Page 184 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<body> <div id="head-container"> <div id="header"> <h1>World Wide Myanmar</h1> </div> </div> <div id="menu-container"> <div id="menu"> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="services.html">Services</a></li> <li><a href="contact.html">Contact us</a></li> </ul> </div> </div> </body> </html> Menu áá˛áá˝áŹááąááŹáś Home, About, Services, Contact us ááŻáááŹáąááźááŻá unordered list áżááá¸áś group ááźá˛áááŹáˇááŤááá¸á style.css áá˛áá˝áŹ CSS Code (style.css) body,td,th { font-family: Zawgyi-One; } h1,h2,h3,h4,h5,h6 { font-family: Zawgyi-One; } #head-container { color: #000; background: #ccc; }
Page 185 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
#header { margin: 0 auto; width: 860px; padding: 20px; background: #ddd; } #header h1 { margin: 0; } #menu-container { float: left; width: 100%; color: #000; background: #333; } #menu { margin: 0 auto; width: 900px; } #menu ul { margin: 0; padding: 0; } #menu ul li { list-style-type: none; display: inline; }
Page 186 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
#menu li a { display: block; float: left; padding: 5px 10px; color: #fff; text-decoration: none; border-right: 1px solid #fff; } #menu li a:hover { background: #383; } Menu Containter áá˛áá˝áŹ float ááŻáááŹá áᎠMenu áĄáŹáˇ ááá¸ááá¸ááąá á áżááŽáˇ áąááŹá¸ááŻáááĄááźáá¸ááŤá Container áá˛á áĄáášáá¸ááŻá 100% áĄáżáá á¸áąááŹá¸ááá¸áˇáąááŹáá¸áˇ menu áá˛á áĄáášáá¸áĄáŹáˇ 900px áĄáżááá¸áśááá¸áˇáąááŹáá¸áˇááá¸áá˝áá¸áᏠMenu áĄáąáááá˝áŹ Mouse ááá¸ááŻááá¸ááŹáá˛á áĄáąááŹáá¸áĄáŹáˇ #383 áĄáżááá¸áś ááá¸áˇáąááŹáá¸áˇ ááá¸áá˝áá¸ááŹáˇááŤááá¸á Menu áá á¸ááŻáá˛á áá á¸ááŻážááŹáˇáá˛áá˝áŹ áĄáżáá´áąááŹáḠline áąááˇáá á¸áᯠáąááźáááŤáááá¸áśááḠ.. .áĄá˛áááŤááąááŹáś border-right áĄáŹáˇ 1px solid ááŹáˇááŹáˇáá˛á áĄááźáá¸áąážááŹáá¸áśááŤá áąááŹáá¸áá á¸á፠Content áąááźááá¸áśááźáá¸áˇááá¸áś Content Container áĄáŹáˇááá¸ááŽáˇáá˝áŹáżáá á¸ááŤááá¸á áá á¸ááá¸ááá¸áˇáá˝áŹáᲠRight Navigation ááŤááźá˛áżááŽáˇ áąááŹá¸áżááąááˇááźáŹáˇááŤááḠ⌠HTML Code (index.html) <html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id="head-container"> <div id="header"> <h1>World Wide Myanmar</h1> </div> </div> <div id="menu-container"> <div id="menu"> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="services.html">Services</a></li>
Page 187 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<li><a href="contact.html">Contact us</a></li> </ul> </div> </div> <div id="content-container"> <div id="content-container2"> <div id="content-container3"> <div id="content"> <h2> Page heading </h2> <p>ááŽáąáááŹáá˝áŹ
áá˝áźáá¸áąááŹá¸ááŻáá
áá˛á
áĄáášáá¸áĄááá¸áąááźáĄáŹáˇááŻáľáˇááŻá
áááśá¸ááźáá¸áˇáąááŹá¸áżáááźáŹáˇááá˝áŹáá˛
áżáá á¸ááŤááá¸á áá á¸ááá¸áˇáĄáŹáˇáżáááśá¸ Home Page áá˛á Content áąááŤá....</p> <p>&nbsp;</p> <p>áĄáąááá Home á About á Services á Contact us ááŻááá˛ááąáááŹááŻááąááŹáś Menu bar ááŻáááá˛áąááááŤááá¸..</p> <p>&nbsp;</p> <p>&nbsp;</p> </div> <div id="rightnav"> <h3>Right Navigation</h3> <p> ááŽáąáááŹááąááŹáś Widget ááŻááąáááŹááŤáá˛.. áá˝áźáá¸áąááŹá¸ááŻáááá˛á áĄáżááŹáˇ blogroll áąááźá Javascript áá˛ááááśá¸ááźáá¸áˇáá˛á Counter áąááˇáąááź.. á ááá¸áżáááśá¸áąááŤá...</p> </div> </div> </div> </body> </html>
&nbsp; ááŻááᏠspace áąáááŹáĄááźáá¸ááŤá áżááŽáˇáąááŹáś content-container áĄáŹáˇ 100% áĄáżáá á¸áá°ááŹáˇáᏠcontentcontainer3 áĄáŹáˇ 900px áá°ááŹáˇááŤááá¸á style.css áá˛áá˝áŹ CSS Code (style.css) body,td,th { font-family: Zawgyi-One; } h1,h2,h3,h4,h5,h6 { font-family: Zawgyi-One;
Page 188 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
} #head-container { color: #000; background: #ccc; } #header { margin: 0 auto; width: 860px; padding: 20px; background: #ddd; } #header h1 { margin: 0; } #menu-container { float: left; width: 100%; color: #000; background: #333; } #menu { margin: 0 auto; width: 900px; } #menu ul { margin: 0; padding: 0;
Page 189 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
} #menu ul li { list-style-type: none; display: inline; } #menu li a { display: block; float: left; padding: 5px 10px; color: #fff; text-decoration: none; border-right: 1px solid #fff; } #menu li a:hover { background: #383; } #content-container { float: left; width: 100%; color: #000; background: #eee; } #content-container2 { margin: 0 auto; width: 900px; } #content-container3 {
Page 190 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
float: left; width: 900px; background: #FFF url(two-fixed-background.gif) repeat-y 100% 0; } #content { clear: left; float: left; width: 560px; padding: 20px 0; margin: 0 0 0 30px; display: inline; } #content h2 { margin: 0; } #rightnav { float: right; width: 240px; padding: 20px 0; margin: 0 20px 0 0; display: inline; } #rightnav h3 { margin: 0; } ááŽáąáááŹáá˝áŹ rightnav ááŻáážááá¸áśá፠áá°á float:right áá˛á width: 240px ááŻááżááŽáˇáá°ááŹáˇááŹá HTML áá˛áááźá˛ážáááśá¸ááá¸ááŻáááḠcontent-container3
á
900
px
áá°ááŹáˇáá˛ááĄáá˛á
áĄáášáá¸
240px
áááŻáá°áżááŽáˇ
ááŹááá¸áá˛á
áąáááŹááŻá
ááá°ááŹáˇááŹáá˛áżáá á¸ááŤááá¸á ááŻáá¸ááá¸áąá.. áá˝áźáá¸áąááŹá¸ááŻááá content ááŻá ááá¸ááá¸áá˛ááŻá áá°ááŹáˇááŹááŻááˇá áąááŹáá¸áá á¸ááŻááąááŹáś
footer
áá˛áášáá¸ááŤááḠ..
footer
áá˝áŹ
áášáŹáˇáąááŹáĄáŹáˇáżááá¸áś
Copyright
ááŹááŹááŻááżááŽáˇ
áąááˇááŹáˇážáááŤááá¸á .áá á¸áášáłááááąááŹáś footer menu áąááˇáąááźááá¸áˇááá¸áśááá¸ááŤááá¸á áĄááŻáąááŹáá¸ááŻáľáˇ ááąááŹáś :HTML Code (index.html)
Page 191 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
<html> <head> <title>CSS by WWM</title> <link rel="stylesheet" type="text/css" href="style.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id="head-container"> <div id="header"> <h1>World Wide Myanmar</h1> </div> </div> <div id="menu-container"> <div id="menu"> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="services.html">Services</a></li> <li><a href="contact.html">Contact us</a></li> </ul> </div> </div> <div id="content-container"> <div id="content-container2"> <div id="content-container3"> <div id="content"> <h2> Page heading </h2> <p>ááŽáąáááŹáá˝áŹ
áá˝áźáá¸áąááŹá¸ááŻáá
áá˛á
áĄáášáá¸áĄááá¸áąááźáĄáŹáˇááŻáľáˇááŻá
áááśá¸ááźáá¸áˇáąááŹá¸áżáááźáŹáˇááá˝áŹáá˛
áżáá á¸ááŤááá¸á áá á¸ááá¸áˇáĄáŹáˇáżáááśá¸ Home Page áá˛á Content áąááŤá....</p> <p>&nbsp;</p> <p>áĄáąááá Home á About á Services á Contact us ááŻááá˛ááąáááŹááŻááąááŹáś Menu bar ááŻáááá˛áąááááŤááá¸..</p> <p>&nbsp;</p> <p>&nbsp;</p> </div> <div id="rightnav"> <h3>Right Navigation</h3> <p> ááŽáąáááŹááąááŹáś Widget ááŻááąáááŹááŤáá˛.. áá˝áźáá¸áąááŹá¸ááŻáááá˛á áĄáżááŹáˇ blogroll áąááźá
Page 192 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
Javascript áá˛ááááśá¸ááźáá¸áˇáá˛á Counter áąááˇáąááź.. á ááá¸áżáááśá¸áąááŤá...</p> </div> </div> </div> <div id="footer-container"> <div id="footer"> Copyright Š World Wide Myanmar, 2010. All rights reserved. </div> </div> </div> </body> </html>
style.css áá˛áá˝áŹ CSS Code (style.css) /* Name : CSS Tutorial URL: http://www.worldwidemyanmar.com Description: This is HTML and CSS Tutorial by WWM Version: 1.0 Author: Administrator Tags: news, reviews, tutorial, products, buy, sell */ body,td,th { font-family: Zawgyi-One; } h1,h2,h3,h4,h5,h6 { font-family: Zawgyi-One; } #head-container { color: #000; background: #ccc; }
Page 193 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
#header { margin: 0 auto; width: 860px; padding: 20px; background: #ddd; } #header h1 { margin: 0; } #menu-container { float: left; width: 100%; color: #000; background: #333; } #menu { margin: 0 auto; width: 900px; } #menu ul { margin: 0; padding: 0; } #menu ul li { list-style-type: none; display: inline; }
Page 194 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
#menu li a { display: block; float: left; padding: 5px 10px; color: #fff; text-decoration: none; border-right: 1px solid #fff; } #menu li a:hover { background: #383; } #content-container { float: left; width: 100%; color: #000; background: #eee; } #content-container2 { margin: 0 auto; width: 900px; } #content-container3 { float: left; width: 900px; background: #FFF url(two-fixed-background.gif) repeat-y 100% 0; } #content {
Page 195 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
clear: left; float: left; width: 560px; padding: 20px 0; margin: 0 0 0 30px; display: inline; } #content h2 { margin: 0; } #rightnav { float: right; width: 240px; padding: 20px 0; margin: 0 20px 0 0; display: inline; } #rightnav h3 { margin: 0; } #footer-container { clear: left; color: #fff; background: #000; } #footer { margin: 0 auto; width: 900px; text-align: right; padding: 20px; height: 1%; }
Page 196 of 197
http://www.worldwidemyanmar.com
Web Design HTML and CSS
DREAM IT, CODE IT BY PLANETCREATOR .NET
áąááŹáá¸ááŻáľáˇ áááá¸ááąááŹáś :-
HTML áá˛á CSS á ááŻááˇáá˝áá¸áˇááźáá¸áá°áżááŽáˇ áĄáąáżáááľáášáá˛á Web Programming áá á¸ááŻáżáá á¸áá˛ááĄááźáḠáąááśááŹáá˛ááá°áąááź áĄáąááá˛á áĄááá¸áˇááá¸áá˛ááá¸ááŻáááąááŹáś
áááá¸ááŤáá°áˇá
ááááááŻáááá˛á
áąááśááŹáááĄáąáááá˝áŹááááá¸áżááŽáˇáąááŹáś
áĄáášááá¸áááŻáĄááźáá¸áˇáá˝áŹ
ááźášáá¸áˇááźášáá¸áˇáášáá¸áášáḠááá¸ááźáŹáˇááŻááá¸ááŤááá¸á
THE END
Remember what I say âDream It, Code Itâ PlanetCreator
Page 197 of 197
http://www.worldwidemyanmar.com