- Anatomy of HTML Document
- Fundamental of HTML
- HTML Layout
- Management of files
HTML is a
- Language for describing web pages
- Hypertext Markup Language (HTML)
- Fundamental building blocks of web
development
- Invented in 1980 by physicist Tim
Berners-Lee
- World Wide Web (WWW)
- HTML is all you need to create a web page
- CSS, JavaScript
Markup languages
- It is not a programming language
- Come in a pair (eg. <h1>Welcome to Fashion On-line site</h1>)
- Plain text
- The markup is accomplished through tags
HTML tags
- It is not a programming language
- Come in a pair (eg. <h1>Welcome to Fashion On-line site</h1>)
- Plain text
- The markup is accomplished through tags
HTML tags
Example:
<b>This is just a plain
text</b>
<b>to indicate where bolded
text would
begin &
</b> to end bolded text
HTML editors
HTML editors
- Adobe Dreamweaver
Step 1: Start Notepad
Step 2: Type your HTML code
Step 3: Save the document as index.html
Step 4: Preview in browser
HTML elements
- Headings are defined with <h1></h1> to <h6><h6> tags
- Paragraph is defined with the <p></p> tag
- Images is defined with the <img> tag
- Images is defined with the <img> tag
Examples:
<img src="ducky.jpg width "253" height="282"/> or
<img src="ducky.jpg alt="Ducky"width "253" height="282" border="2"/>
- Link is defined with the <a></a> tag
- to link to internal pages
- to link to external page
- to create a email link
Examples:
- Link is defined with the <a></a> tag
- to link to internal pages
- to link to external page
- to create a email link
Examples:
<a href="gallery.html">Gallery</a> - internal page link
<a href="http://www.nafa.edu.sg">Click here</a> - external link
<a href="mailto:email address">name</a> - email link
(http://www.w3schools.com/html/html_elements.asp)
HTML attributes
<a href="http://www.nafa.edu.sg">Click here</a> - external link
<a href="mailto:email address">name</a> - email link
(http://www.w3schools.com/html/html_elements.asp)
HTML attributes
- Provide additional information about HTML elements
- Always specified in the start tag
- Come in name/value pairs like: name="value"
Example 1:
HTML – align attribute
<h2 align=“center”>Centered Heading</h2>
<h2 align=“right-align>Right-align Heading</h2>
Example 2:
HTML – font size attribute
<font size=“5”>Here is a size 5 font</font>
Example 3:
HTML – font face attribute
<font face=“georgia, arial, garamond”> This paragrphu has had its font</font>
Example 4:
HTML – font color attribute
<font color=“red”>This text is red colour</font>
(http://www.w3schools.com/html/html_attributes.asp)
HTML colours
Web browsers
HTML Layouts
Management of files
- Always specified in the start tag
- Come in name/value pairs like: name="value"
Example 1:
HTML – align attribute
<h2 align=“center”>Centered Heading</h2>
<h2 align=“right-align>Right-align Heading</h2>
Example 2:
HTML – font size attribute
<font size=“5”>Here is a size 5 font</font>
Example 3:
HTML – font face attribute
<font face=“georgia, arial, garamond”> This paragrphu has had its font</font>
Example 4:
HTML – font color attribute
<font color=“red”>This text is red colour</font>
(http://www.w3schools.com/html/html_attributes.asp)
- Hexadecimal notation (HEX #)
- Combination of Red, Green, Blue (RGB)
- Colour name (ie. red, yellow, green)
<body style="background-color:yellow">Color set by using color name</>
<h2 style="background-color:#FF0000">Color set by using hex value</h2>
<p style="color:rgb(0, 0, 255) Color set by using rgb value</p>
(http://www.w3schools.com/html/html_colors.asp)
- To read HTML documents & display them as web page
- Internet explorer (IE), Chrome, Firefox(mozilla), Safari (mac), Opera (mac)
- Browser does not display the HTML tags, but uses the tags to interpret the content of the page.
- Web page layout is very important to make your website look good
- Columns are created by using <div> elements
Step 1: Create a folder with <yourname>website (this will be where everything gets saved).
Step 2: Create 2 sub folders, an "images" folder and "artwork" folder. All relevant images will save under "images" while photoshop.psd file, illustrator.ai file save under "artwork" folder.
Step 3: Create html document files and save under <yourname>website folder.
updated 3/8/12
ReplyDelete