HTML Tutorial PDF

Skill Enhancement for Student Prepared By NORULHUDA TAJUDDIN UNIVERSITI TEKNOLOGI MARA CAWANGAN PAHANG Alhudatajuddin © 2011 Learning Objective 1 Definition of HTML. 2 Identification of HTML ta...

Skill Enhancement for Student Prepared By NORULHUDA TAJUDDIN UNIVERSITI TEKNOLOGI MARA CAWANGAN PAHANG Alhudatajuddin © 2011 Learning Objective 1 Definition of HTML. 2 Identification of HTML tags. 3 Coding the HTML. 4 Create a group website Alhudatajuddin © 2011 What is HTML?  HTML, which stands for HyperText Markup Language, is the predominant markup language for web pages. HTML is the basic building-blocks of WebPages.  HTML is written in the form of HTML elements consisting of tags, enclosed in angle brackets (like ), within the web page content.  HTML tags normally come in pairs like and. The first tag in a pair is the start tag, the second tag is the end tag (they are also called opening tags and closing tags). In between these tags web designers can add text, tables, images, etc. Source: en.wikipedia Alhudatajuddin © 2011 Basic HTML Document Code Structure Your Page Title This area will contain everything that will be visible through a web browser, such as text and graphics. All of the information will be HTML coded. For a complete list of HTML codes, tags and examples, see the HTML chart below. Alhudatajuddin © 2011 Description for basic HTML code - Begins your HTML document. - Contains information about the page such as the TITLE, META tags for proper Search Engine indexing, STYLE tags, which determine the page layout, and JavaScript coding for special effects. - The TITLE of your page. This will be visible in the title bar of the viewers’ browser. - Closes the HTML tag. - Closes the HTML tag. - This is where you will begin writing your document and placing your HTML codes. - Closes the HTML tag. - Closes the tag. Alhudatajuddin © 2011 1. How to start? 1. Create a new Folder – keep all related file in the same folder 2. Write your HTML code at NOTEPAD. 3. Save as your document -->.html (extension) Alhudatajuddin © 2011 Coding your HTML Your Page Title your word here Alhudatajuddin © 2011 2. Now you may view your page..  Go to Internet explorer  File > open > browse your FILE and click open! Alhudatajuddin © 2011  Alhudatajuddin © 2011 3. All about FONT & TEXT Name Tag example Font type Example Font size Tips  Change your size of image @ height and width. Alhudatajuddin © 2011 Alhudatajuddin © 2011 5. Insert Table  Coding for table Name Phone No. Mohd Ikmal Shah Abdullah 6019-5672 323 Alhudatajuddin © 2011 Alhudatajuddin © 2011  Basic coding 6. Insert HyperLink  Coding Font style added Visit Our Site Visit Our Site Alhudatajuddin © 2011 7. Link to a location on the same page  Coding Introduction To MGT300 Chapter 1 Chapter 2 Chapter 3 Chapter 4 Chapter 5 Go to top Alhudatajuddin © 2011 Alhudatajuddin © 2011 Alhudatajuddin © 2011 Example of Colour Codes Alhudatajuddin © 2011 Alhudatajuddin © 2011 PREPARE YOUR OWN WEBSITE 1. Pay attention to TITLE and HEADER of the website 2. Introduction to your self. 1. Use variety: font size, font style, underlined, font color, italic and bold. 3. At least 1 still image and 1 animated image. 4. At least 1 hyperlink to your own website. 5. Table 3x3 Alhudatajuddin © 2011 References  http://www.web-source.net/html_codes_chart.htm  http://en.wikipedia.org/wiki/HTML  http://html-color-codes.info/  http://www.computerhope.com/htmcolor.htm  http://www.w3schools.com/default.asp Learn More about HTML coding, visit this website! Alhudatajuddin © 2011 Thank You “Give a man a fish; you have fed him for today. Teach a man to fish; and you have fed him for a lifetime. Teach a man to sell fish and he eats steak.” Author unknown Alhudatajuddin © 2011