html basics
DESCRIPTION
HTML Basics. ICS 415 Cam Moore 29 Aug 2013. What is HTML. Hypertext Markup Language Basis for the World Wide Web ASCII Text document Used by Web browsers to present text and graphics HTML documents include markup tags and plain text to describe the contents of the document. - PowerPoint PPT PresentationTRANSCRIPT
(1)
HTML Basics
ICS 415Cam Moore29 Aug 2013
(2)
What is HTML Hypertext Markup Language• Basis for the World Wide Web• ASCII Text document• Used by Web browsers to present text and
graphics• HTML documents include markup tags and
plain text to describe the contents of the document
(3)
HTML Versions HTML – 1991 HTML+ – 1993 HTML 2.0 – 1995 HTML 3.2 – 1997 HTML 4.01 – 1999 XHTML 1.0 – 2000 HTML5 – 2012 XHTML5 – 2013
(4)
Basic HTML Page
<!DOCTYPE html><html><head>
<title>Basic HTML Page</title></head><body>
<h1>Heading 1</h1><p>First paragraph … </p><a href=“link.html”>Link</a>
</body></html>
(5)
DOCTYPE Defines the document type. HTML5• <!DOCTYPE html>
HTML 4.01• <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML
4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
XHTML 1.0• <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML
1.0 Transistional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transistional.dtd”>
(6)
HTML Tags HTML tags are keywords surrounded by <>• <html>, <head>, <title>,…• Normally come in pairs <html>…</html>• Define HTML Elements
Basic tags:• Structure <html>, <head> and <body>• Headings <h1>, <h2>, …, <h6>• Paragraph <p>• Links <a href=“/”>Link</a>• Images <img src=“hi.png”>• Comment <!-- This is a comment -->
Tags should be lower case and be closed See: http://www.w3schools.com/tags/default.asp
(7)
HTML Attributes HTML Elements may have Attributes Attributes provide additional information about HTML Elements Specified in the start tag of the element Name/Value pairs• name=“value”• Should be quoted ‘Carleton “Cam” Moore’• Should be lower case
Standard Attributes:• class – one or more class in a style sheet• id – unique id for the element• style – inline CSS style for the element• title – extra information about the element (tooltip)
(8)
HTML Head Element The <head> element is a container for heading elements• <title> - the title of the document• <style> - defines style information for the
document• <meta> - metadata about the document• <link> - defines relationship to external
resource• <script> - client-side script, such as JavaScript• <noscript> - displays message if scripting is
disabled in the client• <base> - specifies the base URL/target for all
URLs in the page
(9)
HTML TablesTag Description
<table> Defines the table (border attribute controls table borders)
<th> Header Cell in the table
<tr> Row in the table
<caption> The table’s caption
<colgroup> Groups one or more columns in the table for formatting
<col> Column properties for each column in the <colgroup>
<thead> Groups table header content
<tbody> Groups table body content
<tfoot> Groups table footer content
(10)
HTML Lists Ordered Lists (Numbered)• <ol> - <li>
Unordered Lists (Bullets)• <ul>- <li>
Description Lists• <dl> - <dt>- <dd>
(11)
HTML Blocks <div> is a block element that can contain other HTML elements
<span> is an inline element that can contain other HTML elements
Mostly used for styling via CSS
(12)
HTML Forms Forms are used to pass information to a Server <form>
• <input>• <textarea>• <button>• <select>• <option>• <filedset>• <label>
Attribute Value Description
name text Name of the form
action URL Where to send the form data
method get/post The HTTP method
(13)
Form Example <form name=“input” action=“example.html” method=“get”> Username: <input type=“text” name=“user”> <input type=“submit” value=“Submit”> </form>
(14)
Input types Text• <input type=“text” name=“firstname”>
Password• <input type=“password” name=“pwd”>
Radio Button• <input type=“radio” name=“sex” value=“male>
Checkbox• <input type=“checkbox” name=“vehicle” value=“Car”>
Submit Button• <input type=“submit” value=“Submit”>
(15)
HTML Iframes Iframes are used to display web pages within a web page
• <iframe src=“URL”></iframe>
(16)
HTML Frames HTML Frames allow independent windows or subwindows
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>
The <frameset> element replaces the <body> element• Attributes: rows, cols- %, pixels, *(remainder) “1*,250,3*,10%”
(17)
HTML Frames (cont) <frame> elements inside <frameset> element• Attributes:- name – name of frame for targeting- src – URL source for frame content- frameborder – 0|1 hide or show border- marginwidth – in pixels- marginheight – in pixels
See http://www.w3.org/TR/html401/present/frames.html for more