Ch. 2. HTML 1

HTML? 2  Tim Berner-Lee first proposed (1981) and coded (1991)  HTML: HyperText Markup Language  Web browser 용  W3C (World Wide Web Consortium) 규약 및 권고에 따름  현재 HTML5 사용 권고

Basic Format 3 This is a title Hello world!

Heading (The examples further from here from 4  This is a heading level 1  This is a heading level 2  This is a heading level 3  This is a heading level 4  This is a heading level 5  This is a heading level 6

Paragraph 5 This is a paragraph. HTML paragraphs are defined with the p-tag This is another paragraph.

  This is a heading  This is a paragraph.  Centered Heading 6/20 Style

 This text is bold  This text is strong  This text is italic  This text is emphasized  HTML Small Formatting  HTML Marked Formatting  My favorite color is blue red 7/20 Formatting

 My favorite color is red  This is subscripted text  This is superscripted text 8/20

TagDescription Defines an abbreviation or acronym Defines contact information for the author/owner of a document Defines the text direction Defines a section that is quoted from another source Defines the title of a work Defines a short inline quotation 9/20 Quotation

  This is a paragraph. 10/20 Comments

 This is a Blue Heading  body {background-color:lightgrey;} h1 {color:blue;} p {color:green;} This is a heading This is a paragraph. 11/20 Style

 This is a heading This is a paragraph.  style.css  body { background-color: lightgrey; } h1 { color: blue; } p { color:green; } 12/20

 p { border: 1px solid black; padding: 10px; margin: 30px; } 13/20

 a:link {color:green; background-color:transparent; text-decoration:none} a:visited {color:pink; background-color:transparent; text-decoration:none} a:hover {color:red; background-color:transparent; text-decoration:underline} a:active {color:yellow; background-color:transparent; text-decoration:underline}  Visit W3Schools!   Useful Tips Section  Visit the Useful Tips Section 14/20 Links-color

 img { width:100%; } 15/20 Image

 16/20 Image Maps

 Jill Smith 50 Eve Jackson 94  table, th, td { border: 1px solid black; border-collapse: collapse; } 17/20 Table

 Use the HTML element to define a table  Use the HTML element to define a table row  Use the HTML element to define a table data  Use the HTML element to define a table heading  Use the HTML element to define a table caption  Use the CSS border property to define a border  Use the CSS border-collapse property to collapse cell borders  Use the CSS padding property to add padding to cells  Use the CSS text-align property to align cell text  Use the CSS border-spacing property to set the spacing between cells  Use the colspan attribute to make a cell span many columns  Use the rowspan attribute to make a cell span many rows  Use the id attribute to uniquely define one table 18/20

 Coffee Tea Milk 19/20 List

StyleDescription list-style-type:disc The list items will be marked with bullets (default) list-style-type:circle The list items will be marked with circles list-style-type:square The list items will be marked with squares list-style-type:noneThe list items will not be marked 20/20

TypeDescription type="1" The list items will be numbered with numbers (default) type="A" The list items will be numbered with uppercase letters type="a" The list items will be numbered with lowercase letters type="I" The list items will be numbered with uppercase roman numbers type="i" The list items will be numbered with lowercase roman numbers 21/20

 London London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.  My Important Heading 22/20 Block elements

 div.cities { background-color:black; color:white; margin:20px; padding:20px; } London London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. Paris Paris is the capital and most populous city of France. Tokyo Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world. 23/20 Classing Block Elements

 City Gallery London Paris Tokyo London London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium. Copyright © W3Schools.com 24/20 Layouts

 #header { background-color:black; color:white; text-align:center; padding:5px; } #nav { line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; padding:5px; } #section { width:350px; float:left; padding:10px; } #footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; } 25/20

 document.getElementById("demo").inner HTML = "Hello JavaScript!"; Sorry, your browser does not support JavaScript! 26/20 Javascripts

TagDescription Defines information about the document Defines the title of a document Defines a default address or a default target for all links on a page Defines the relationship between a document and an external resource Defines metadata about an HTML document Defines a client-side script Defines style information for a document 27/20 HEAD Elements

 First name: Last name:  action_page.php 에서는 변수 $_POST[“name”] 로 전달됨 28/20 Form