Download presentation
Presentation is loading. Please wait.
1
Introduction to HTML UWWD
2
Agenda What do you need? What do you need? What are HTML, CSS, and tags? What are HTML, CSS, and tags? html, head, and body (and title) html, head, and body (and title) Headers and paragraphs Headers and paragraphs Tables, anchor links, and images Tables, anchor links, and images Lists (no, we do not use cons) Lists (no, we do not use cons)
3
What do you need? Requirements: Requirements: – Computer – Text Editor (Notepad or gedit is fine) – A web browser (to test results) What you don't need: What you don't need: – A web server (can be done on computer) – Experience in C, C++, Java, Scheme, etc.
4
Sample HTML Code <html><head> Website Title Name Website Title Name </head><body> This is my real title This is my real title Paragraph goes here Paragraph goes here </body></html>
5
What is HTML? HyperText Markup Language HyperText Markup Language Defines structure of webpage Defines structure of webpage Is a markup language, not a programming language Is a markup language, not a programming language Markup languages use markup tags Markup languages use markup tags HTML uses markup tags to structure web pages HTML uses markup tags to structure web pages
6
What is CSS? Cascading Style Sheets Cascading Style Sheets Defines the style/layout of webpage Defines the style/layout of webpage CSS is stored in stylesheets, either internal or external CSS is stored in stylesheets, either internal or external Will be introduced next week Will be introduced next week
7
What is a tag? Lower-case keywords surrounded in angle brackets, ie. Lower-case keywords surrounded in angle brackets, ie. Come in pairs, ie. and Come in pairs, ie. and First tag opens, second closes, can be nested First tag opens, second closes, can be nested Some tags contain attributes, provides additional information, ie. Some tags contain attributes, provides additional information, ie. Elements are content between the tags Elements are content between the tags Example, Example, – This is text. – This is text.
8
html, head, body html tag defines whole document html tag defines whole document – opens and closes body tag is container for content of HTML body tag is container for content of HTML – opens and closes – Many tags will be nested inside head tag is container for head elements head tag is container for head elements – opens and closes – head elements include script, title, etc.
9
The title Tag UW Webdesigners Club UW Webdesigners Club It is used... It is used... – For the title on the top of your browser – As the title for your favourites – For the title search engines use upon indexing your site Required for all valid (standardized) xHTML and HTML coding standards Required for all valid (standardized) xHTML and HTML coding standards
10
Headers and paragraphs This is my header text, where This is my header text, where – X refers to numbers 1-6, one being most important – 1 refers to main header (used once), 2 refers to sub-header (used multiple times), etc. Used to display on-screen title pages Used to display on-screen title pages This is text that is part of a paragraph This is text that is part of a paragraph Used to display regular content Used to display regular content Both are key in good webdesign standards Both are key in good webdesign standards
11
Exercise 1 Create a basic webpage with the following. Create a basic webpage with the following. – Title of "Test Webpage" – Main header that says, "This is only a test." – Paragraph 1 that says, "I am currently on a computer." – Paragraph 2 that says, "I am thankful I am not doing math." Save the exercise as exercise1.html for a future exercise. Save the exercise as exercise1.html for a future exercise.
12
Anchor Links Link to Google Link to Google http://www.google.com Used to hyperlink element to URL specified, as in example Used to hyperlink element to URL specified, as in example mailto:you@me.com allows email linking mailto:you@me.com allows email linking mailto:you@me.com http (or https) required if linking to external page http (or https) required if linking to external page
13
Inserting Images Where stuff.jpg is the URL to image, "Text" displayed if image link dead (required) Where stuff.jpg is the URL to image, "Text" displayed if image link dead (required) Implicitly closed Implicitly closed Attribute border="X" defines border length X Attribute border="X" defines border length X You can hyperlink an image You can hyperlink an image – –
14
Tables <tr> row 1, cell 1 row 1, cell 1 row 1, cell 2 row 1, cell 2 </tr><tr> row 2, cell 1 row 2, cell 1 row 2, cell 2 row 2, cell 2 </tr></table>
15
Tables, define a new table, define a new table, define new row, define new row, define new column (elements of td are data), define new column (elements of td are data) rowspan="X", colspan="X" rowspan="X", colspan="X"
16
Inserting a list Example 1: <ul> This is an unordered list This is an unordered list I'm number 2! I'm number 2! </ul> Example 2: <ol> I have a number I have a number </ol>
17
Inserting a list, define unordered lists (bullets), define unordered lists (bullets), define ordered lists (numbers), define ordered lists (numbers), define an element on list, define an element on list Used to define lists Used to define lists
18
Exercise 2 Using Exercise 1, below the second paragraph, Using Exercise 1, below the second paragraph, – Create a subheader (h2) called "My Grocery List" – Create a list which contains apples, oranges, and grapes. – Create a 2x2 table with the following elements. CatDog FrogSheep
19
What comes next? Learn new tags! Learn new tags! – http://www.w3schools.com Play around with HTML Play around with HTML – Try learning how dd/dt, meta tags work Next Week: Introduction to CSS, more HTML tags Next Week: Introduction to CSS, more HTML tags
Similar presentations
