Download presentation
Presentation is loading. Please wait.
1
Basic HTML
2
Lecture Goal After you finish this lessen, you will be able to make a HTML page like the below
3
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) # (Black), # (almost black gray), …, #eeeeee (almost white gray), #ffffff (White)
4
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에 대한 상대값
5
HTML structure <html> <head> </head> <body>
6
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
7
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
8
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>
9
HTML Tags table, tr, td div, span, p a img input select, option
ul, ol, li br
10
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.
11
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;
12
<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>
13
<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
14
Browser output
15
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
16
Browser output
17
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자체가 없음
18
Browser Output
19
Padding, margin, spacing
No padding Text Text padding spacing (or margin) border
20
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>
21
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>
22
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”>
23
Browser output
24
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>
26
<a> <a> is for HTML link
Ex: <a href=“ target=“_blank”>go to google </a> Attribute href: URL link target: _blank open a new window
27
<img/> <img src=“…” width=“00” height=“00”/> is for image
Src : required Width and height: optional Ex: <img src=“ 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.
29
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
31
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>
32
Browser output
33
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>
34
Browser output
35
WISWIG HTML Editor
36
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
![Homework Go to prefix]/](http://slideplayer.com./slide/12988527/79/images/36/Homework+Go+to++++prefix%5D%2F.jpg "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.")
37
Next class CSS (Cascading Style Sheet) More advanced HTML elements
DOM (document object model) Fancy effects using Javascript (jQuery) Overall Website Structure
Similar presentations
