Basic HTML
Lecture Goal After you finish this lessen, you will be able to make a HTML page like the below
Notation RGB notation for color In a HTML page, color is represented as #rrggbb, where rr/gg/bb is hexadecimal number for red/green/blue Hexadecimal number: 0-9, 10:A, 11:B, 12:C, 13:D, 14:E, 15:F Some frequently used values #ff0000 (Red), #00ff00(Green), #0000ff(Blue) #000000 (Black), #111111 (almost black gray), …, #eeeeee (almost white gray), #ffffff (White)
Notation Size px, pt for font size px, % for width, height 10px:10px size for font 10pt: 10pt size for font px, % for width, height 100px : 100px width/height , 절대값 80%: 80% width/height for parent element, 상위 element에 대한 상대값
HTML structure <html> <head> </head> <body>
HTML Characteristics Enter key Space Not next line but space In html, next line is <br/> Space Many spaces is effectively equal to a single space means space and many of show as many spaces
Tag and Text HTML page comprises with tags and texts in those tags <head> <title>Example</title> </head> <body> Hi, my name is <span style=“color:#0000ff”> James</span> </body> </html> tag
Tag <tagname>: starting tag </tagname>: closing tag <tagname/>: tags with both Ex: <img/> Tag structure <tagname attributename=“attributevalue”></tagname> Ex: <table width=“200”><tr><td>a</td><td>b</td></tr></table> A tag block is called a html element In the above example, 4 html elements exist: <table>…</table>, <tr>…</tr>, <td>a</td>, <td>b</td>
HTML Tags table, tr, td div, span, p a img input select, option ul, ol, li br
Attributes of Tags id: unique identifier class: style: presentation <div id=“div1”></div> class: <div class=“productdescription”></div> class name: class_1, class-1, class 1 (not allowed) Multiple elements can have the same class name Ex: <div id=“div1” class=“class1”></div> <div id=“div2” class=“class1”></div> style: presentation <div style=“color:#ffffff; background-color:#000000;”> hello </div> color, size, position, align type: user input type, exclusively used for <input> tag text, radio, check ex: <input type=“text”/> id, class, style are used for all tags whereas type is meaningful only for <input> There are many other attributes, and even you can add your own attributes name and value, which a web browser does not care.
Style Attribute Style=“property-name:property-value;…;” Ex: <div style=“border:1px solid; color:#ff0000”>…</div> Border: 1px solid #cccccc dashed, dotted padding-top: 5px; padding-bottom: 5px; padding-left: 0px; padding-right: 0px; Padding:0px means padding-top/bottom/left/right all 0px font-size: 11px font-family: Verdana, Arial, … First look for verdana, if not found then use arial, and so on cursor:pointer Mouse shape when mouse over line-height: 20px;
<table> style no price st-1234 $12.00 st-5678 $23.00 <table border=“1”> <tr><td>style no</td><td>price</td></tr> <tr><td>st-1234</td><td>$12.00</td></tr> <tr><td>st-5678</td><td>$23.00</td></tr> </table> style no price st-1234 $12.00 st-5678 $23.00 <table> <tr> <td>
<table> cont’d The most important tag Originally, it was for grid-format data presentation, but nowadays it is primarily used for layout of a webpage <table> and <div> are the two most used tags
Browser output
td with colspan colspan Merged columns <table border=“1”> <tr><td>style no</td><td colspan=“2”>price</td></tr> <tr><td>st-1234</td><td>$12.00</td><td>$14.00</td></tr> <tr><td>st-5678</td><td>$23.00</td><td>$25.00</td></tr> </table> colspan Merged columns
Browser output
td with rowspan rowspan Merged rows <table border="1"> <tr><td rowspan="2"> school </td><td>elementary</td></tr> <tr> <td>Jr. High </td></tr> </table> rowspan Merged rows 가장 위에 merge 된 td가 위치하고 그 밑으로는 td자체가 없음
Browser Output
Padding, margin, spacing No padding Text Text padding spacing (or margin) border
Browser output <h1> Table without cellpadding</h1> <table border="1"> <tr><td>style no</td><td>price 1</td><td>price 2</td></tr> <tr><td>st-1234</td><td>$12.00</td><td>$14.00</td></tr> <tr><td>st-5678</td><td>$23.00</td><td>$25.00</td></tr> </table> <h1> Table with cellpadding</h1> <table border="1" cellpadding="10"> <tr> <td>style no</td> <td>price 1</td> <td>price 2</td> </tr>
Cellspacing … <table border="1" cellpadding="10“ cellspacing=“10”> <tr> <td>style no</td> <td>price 1</td> <td>price 2</td> </tr> <tr><td>st-1234</td><td>$12.00</td><td>$14.00</td></tr> <tr><td>st-5678</td><td>$23.00</td><td>$25.00</td></tr> </table>
align Horizontl align: left, center, right Left is default value for horizontal align, i.e., if you do not specify horizontal align, your text will be horizontally aligned left Vertical align: top, middle, bottom middle is default value, i.e., if you do not specify vertical align, your text will be vertically aligned middle <td style=“text-align:center; vertical-align: top”>
Browser output
Background, foreground Background can be set with color, image, or nothing (default) <td style=“background-color:#000000”> aa </td> Foreground means text color (default is black, i.e., #000000) <td style=“color:#ff0000”> bb </td>
<a> <a> is for HTML link Ex: <a href=“http://www.google.com” target=“_blank”>go to google </a> Attribute href: URL link target: _blank open a new window
<img/> <img src=“…” width=“00” height=“00”/> is for image Src : required Width and height: optional Ex: <img src=“http://www.pizzahut.com/Images/Menu/betpStuffedPizzaRolls.jpg” width=“150” height=“93”/> Original dimension: width=150px, height:93px If attributes width and height does not exist, original dimension is shown If either width or height is specified, original ratio is retained. If both width and height is specified to be different from original ratio, then the image is warped.
div, span, p and others <p></p> : paragraph <span></span> : for grouping small part of texts <div></div>: for grouping large group of elements Most of big websites heavily use <div> tag Facebook, google, yahoo, zillow, etc Used to generate html elements dynamically <b></b>: bold <i></i>: italic
ul, ol, li ul: unordered list ol: ordered list with numbering li: an item in <ul></ul> or <ol></ol> Ex: <ul> <li> item 1 <li> sub item 1 of item 1 </li> <li> sub item 2 of item 1 </li> </li> <li> item 2 </li> </ul>
Browser output
input, select Textbox: for user input <input type=“text”/> Radio Buttons: for single selection <input type=“radio” name=“gender” value=“female” /> female <input type=“radio” name=“gender” value=“male” /> male Checkbox: for multiple selection <input type=“checkbox” name=“sns” value=“facebook”/> <input type=“checkbox” name=“sns” value=“twitter”/> Select <select name=“country”> <option value=“us”>United States</option> <option value=“korea”>Korea</option> <option value=“china”>China</option> </select>
Browser output
WISWIG HTML Editor
Homework Go to http://www.myweboasis.com/webclass/[your email prefix]/ Click homework 3 link and modify the html page to change it more attractive Ex: add padding, color, background color, adjust width, height, change font, size etc
Next class CSS (Cascading Style Sheet) More advanced HTML elements DOM (document object model) Fancy effects using Javascript (jQuery) Overall Website Structure