Presentation is loading. Please wait.

Presentation is loading. Please wait.

Intro to HTML Kin 260 Jackie Kiwata. Overview HTML Defined HTML Defined Syntax Syntax Structure Structure Content Content Posting Online Posting Online.

Similar presentations


Presentation on theme: "Intro to HTML Kin 260 Jackie Kiwata. Overview HTML Defined HTML Defined Syntax Syntax Structure Structure Content Content Posting Online Posting Online."— Presentation transcript:

1 Intro to HTML Kin 260 Jackie Kiwata

2 Overview HTML Defined HTML Defined Syntax Syntax Structure Structure Content Content Posting Online Posting Online

3 What is HTML? Stands for Hyper Text Markup Language Stands for Hyper Text Markup Language The glue that holds the content on a web page together The glue that holds the content on a web page together Every page on the web is created in HTML, or some variant of it Every page on the web is created in HTML, or some variant of it

4 HTML Files Merely text files that contain hyperlinks and markup Merely text files that contain hyperlinks and markup –Hyperlinks: ? –Markup:  HTML instructions that dictate how the web page is displayed  Read by browsers But each web browser interprets HTML in its own way But each web browser interprets HTML in its own way –With basic HTML, variances aren’t significant –But pages with advanced elements like multimedia and scripting can get hairy

5 XHTML The new and improved version of HTML The new and improved version of HTML Based on XML Based on XML –Extensible Markup Language –Works well with software and the Internet Irregularities in HTML cause problems for software, so XHTML bridges the gap between software and web pages Irregularities in HTML cause problems for software, so XHTML bridges the gap between software and web pages Most HTML and XHTML markup is identical Most HTML and XHTML markup is identical Eventually, XHTML will replace HTML, but HTML is still going strong Eventually, XHTML will replace HTML, but HTML is still going strong

6 HTML Syntax 3 aspects to HTML markup: 1. Elements - Identify different parts of an HTML page by using tags 2. Attributes - Information about the instance of the element 3. Entities -Symbols like copyright (©) and accented letters (è)

7 Elements The building blocks of HTML The building blocks of HTML Use elements to describe every piece of text on web pages Use elements to describe every piece of text on web pages Made up of tags and content between tags Made up of tags and content between tags e.g. e.g.


8 Tags Mark the beginning and sometimes the end of an element (tag pair) Mark the beginning and sometimes the end of an element (tag pair) Elements that describe a page’s structure always use tag pairs Elements that describe a page’s structure always use tag pairs Welcome to the Kin 260 page! Welcome to the Kin 260 page! tells the browser, “The paragraph begins here”. tells the browser, “The paragraph begins here”. tells the browser, “The paragraph ends here.” tells the browser, “The paragraph ends here.”

9 Tags, con’t. Elements that insert something into a page use single tags Elements that insert something into a page use single tags –Don’t enclose content The element references an image The element references an image When the browser displays the page, it replaces with the file “football.jpg” When the browser displays the page, it replaces with the file “football.jpg”

10 Attributes Allow variety in how an element is displayed or functions Allow variety in how an element is displayed or functions Syntax is: Syntax is: Example Example

11 Entities Special characters that can be displayed on web pages Special characters that can be displayed on web pages Begin with an ampersand (&) and end with a semicolon (;) Begin with an ampersand (&) and end with a semicolon (;) e.g. To display è in the browser, need to use ´ e.g. To display è in the browser, need to use ´

Montr´al

List of HTML entities: List of HTML entities: asp asp

12 Comments Good programming practice to use comments in code to explain code functionality Good programming practice to use comments in code to explain code functionality Comments are not displayed in the final web page Comments are not displayed in the final web page Begin comment with the string End comment with the string -->

13 Structure of HTML Document 1. HTML version declaration Contains info about the page’s HTML version Contains info about the page’s HTML version 2. Header section Contains info about web page Contains info about web page 3. Body section Contains content of web page Contains content of web page

14 Example of HTML Structure My first HTML document My first HTML document Hello world! Hello world!

15 HTML Version Declaration At the top of every html document, must have this declaration: At the top of every html document, must have this declaration: The declaration creates a valid HTML page The declaration creates a valid HTML page The declaration also tells the browser what version of HTML to support The declaration also tells the browser what version of HTML to support

16 The Head Element Header that provides basic information about the document Header that provides basic information about the document Always enclosed inside Always enclosed inside Contains title and metadata Contains title and metadata –Data that describes the page –List of keywords Kin 260 Home Page Kin 260 Home Page

17 The Body Element Holds the content of the web page Holds the content of the web page Always enclosed inside Always enclosed inside Always comes after the element Always comes after the element Kin 260 Home Page Kin 260 Home Page Welcome to Kin 260! Welcome to Kin 260!

18 Ex 1 – 1 st HTML page Download and save the HTML starter code Download and save the HTML starter code Make the following changes: Make the following changes:HTML Hello World Hello World View the results in the browser View the results in the browser

19 Saving your HTML file File > Save As File > Save As Save as Type: All Files Save as Type: All Files Encoding: ANSI Encoding: ANSI File name: Example.html File name: Example.html

20 Viewing your HTML page Find the file on your hard disk Find the file on your hard disk Open the file using your web browser Open the file using your web browser If make a change to the html file, save in text editor, then refresh the page in the browser If make a change to the html file, save in text editor, then refresh the page in the browser

21 Adding content to HTML pages Inside the, use text blocks to further create structure Inside the, use text blocks to further create structure Includes: Includes: –Paragraphs –Headings –Lists –Tables

22 Summary of Text Blocks TagDescriptionExample

Paragraph Paragraph Most common block element used on pages Most common block element used on pages Kin 260 is a class for undergraduate Kin majors. Kin 260 is a class for undergraduate Kin majors.

Headings and subheadings Headings and subheadings h6 is the smallest heading h6 is the smallest heading Welcome to the Kin 260 Home Page! Welcome to the Kin 260 Home Page!
Line break Line break Like hitting the Enter key Like hitting the Enter key Today in Kin 260 … Today in Kin 260 …
HTML!


Solid straight line Solid straight line Kin 260 Home Kin 260 Home

Announcements


23 Ex 2 – Text Blocks Create a web page that closely mirrors the following output: Create a web page that closely mirrors the following output: Hint: Use the starter code Hint: Use the starter code Header One Header Two HTML isn’t so bad after all.

24 Lists 2 main types: Bulleted and numbered 2 main types: Bulleted and numbered Use within Use within Bulleted example: Bulleted example:

    First list item First list item Second list item Second list item
stands for Unordered List stands for Unordered List –Encloses the list stands for List Item stands for List Item –Use for each list item

25 Lists, con’t. Numbered Example Numbered Example

    First list item First list item Second list item Second list item
stands for Ordered List stands for Ordered List –Like, encloses the list –Use for each list item

26 Ex 3 - Lists Create a web page that closely mirrors the following output: Create a web page that closely mirrors the following output: To Do Grocery Shopping Workout Grocery Shopping 1.Eggs 2.Milk

27 Posting Your Pages Online 1. Need a web hosting provider to hold your web pages Last time, we used Google Sites Last time, we used Google Sites –Editor and Web Host Web host might be the university web server, your Internet Service Provider or a specialized web hosting service Web host might be the university web server, your Internet Service Provider or a specialized web hosting service Usually, you pay your web host a monthly fee to act as your web server Usually, you pay your web host a monthly fee to act as your web server

28 Posting Your Pages Online (con’t.) 2. Use special software, called an FTP client, to upload files to the web server FTP client will make connection to web server, and you copy files from your hard drive to the server FTP client will make connection to web server, and you copy files from your hard drive to the server

29 +/- of using a Web Host + Use any domain you want Check to see if domain is availableCheck to see if domain is availablewww.godaddy.com + Absolute control over folder paths, page content, layout - Not free - Must be proficient in HTML at the very least

30 Additional Info & References HTML Tutorial: Tanenbaum, A. S. (2003). Computer Networks. Upper Saddle River, NJ: Prentice Hall Tittel, E. & Burmeister, M. (2005). HTML 4 For Dummies, 5 th Edition. Indianapolis, IN: Wiley


Download ppt "Intro to HTML Kin 260 Jackie Kiwata. Overview HTML Defined HTML Defined Syntax Syntax Structure Structure Content Content Posting Online Posting Online."

Similar presentations


Ads by Google