Download presentation
Presentation is loading. Please wait.
1
Introduction to HTML Practice of basic HTML tags
Part 1 Introduction to HTML Practice of basic HTML tags
2
Good Programming Practices Basic HTML Tags Headings Creating Links
Overview of Session 1 Why learn XHTML? Good Programming Practices Basic HTML Tags Headings Creating Links Adding an Image Linking Through an Image HR and Other Special Characters Background Color Fonts, Color, Size Lists Unordered Ordered Indented/ Nested Definitional Tables
3
XHTML Basics Why learn HTML?
this basic skill will help you manipulate and customize some Internet tools you will come across HTML is the mark-up language for all websites Think of it like the words from which someone is recording an audio book – the user hears the worlds, but in order to record the words, someone had to read the words why learn HTML is akin to asking why learn multiplication or long division when you can use calculators? As you probably tell your students, unless they know the fundamentals of something, they really have no control or scope for greater understanding or of gaining as much use as possible – one is not really empowered by online tools unless one can manipulate html HTML (HyperText Markup Language) markup language for creating web pages Akin to asking why learn multiplication or long division when you can use calculators, or spelling when you can use spell check. Unless you know the fundamentals of something, you really have no control or scope for greater understanding or depth of knowledge – you are not really empowered Mmany web creation software out there but every single web designer worth his salt knows basic HTML , search, Metacrawler.com – send criteria of the search to other search engines and aggregate the results (do not maintain dbs like search engines)
4
What You Will Need Tools of the trade
A simple editor like Notepad or TextEdit to save the document as .txt and then .htm Your favorite browser like Firefox or Safari or Chrome or Opera To view your masterpiece If possible steer away from older versions of Internet Explorer (IE) Akin to asking why learn multiplication or long division when you can use calculators, or spelling when you can use spell check. Unless you know the fundamentals of something, you really have no control or scope for greater understanding or depth of knowledge – you are not really empowered Mmany web creation software out there but every single web designer worth his salt knows basic HTML , search, Metacrawler.com – send criteria of the search to other search engines and aggregate the results (do not maintain dbs like search engines)
5
Tips for Good Programming
Whitespaces for readability Assign filenames to documents that describe their functionality. This practice can help you identify documents faster It also helps people who want to link to a page, by giving them an easy-to-remember name. For example, if you are writing an HTML document that contains product information, you might want to call it products.html
6
Tips for Good Programming
Indenting nested elements emphasizes a document’s structure and promotes readability. Place comments throughout your markup. Comments help other programmers understand the markup, assist in debugging and list useful information that you do not want the browser to render. Comments also help you understand your own markup when you revisit a document to modify or update it in the future. Remember comments in HTML always begin with <!-- and end with -->. The browser ignores all text inside a comment
7
Getting Started Visit this site: http://www.onlinehtmleditor.net/
Copy and Paste the following in the empt space and view the results: html> <head> <title> ... the title on your website ... </title> </head> <body> the body of your text goes here ... </body> </html> <html> <head><title> ... the title on your website ... </title></head> <body>.... the body of your text goes here ... </body> </html>
8
Saving Material If you want to save this any of your html code, you may do so by copying and pasting on a simple text editor as whatevername.txt Then save it again – this time as whatevername.htm You should be able to open the .htm file using the browser of your choice (double-click to open or right click for more options)
9
Understanding Basic HTML
In HTML, text is marked up with elements delimited by tags that are names contained in pairs of angle brackets Every HTML document contains a start <html> tag and a closing </html> tag (with some exceptions like the <br> tag ) Every HTML document contains a head element which generally contains: A head and a title element A body element head element is not rendered in the display window the title appears as the browser ‘tab’
10
The Basic Tags: paragraphs
Now keep adding to your existing code (you can replace the text in white with whatever you wish – this is just practice) : Remember to keep saving your .txt file and reloading your browser so you can track the updates <html> <head> <title> EDW 647 </title> </head> <body> <p> this is our very first website </p> <!– new paragraph -> </body> </html> <html> <head><title> ... the title on your website ... </title></head> <body>.... the body of your text goes here ... </body> </html>
11
The Basic Tags: headings
<html> <head><title> ... the title on your website ... </title></head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> <!– headings of different sizes-> <p> this is our very first website </p> </body> </html> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6>
12
The Basic Tags: creating links
<html> <head><title> ... the title on your website ... </title></head> <body> <h2>Links and Things </h2> <p> this is our very first website </p> <a href =" > This is a link to my favorite news site </a> <!– the anchor tag to create new links -> </body> </html> <a href=" is a link to my favorite news site </a>
13
The Basic Tags: creating links, adding an image
<html> <head><title> ... the title on your website ... </title></head> <body> <h2>Links and Things </h2> <p> this is our very first website </p> <a href =" >This is Lancaster</a> <img src=" alt=“Map of Lancaster” border="0" width="104" height="142" /> </a> <!– source of image -> </body> </html> Are you saving you .txt. and reloading your browser? <img src=" alt="The UK" border="0" width="104" height="142" />
14
The Basic Tags: creating links from an image
<html> <head><title> ... the title on your website ... </title></head> <body> <h2>Links and Things </h2> <p> this is our very first website </p> <a href =" >This is Lancaster</a> <br><br> <a href= “ <img src=" alt=“Map of Lancaster” border="0" width="104" height="142" /> </a> <!– useful way to cite copyrighted material – just link to the source-->. </body> </html> <a href= " <img src=" alt="The UK" border="0" width="104" height="142" /> </a>
15
The Basic Tags: bold, italics
<html> <head><title> ... the title on your website ... </title></head> <body> <h2>Links and Things </h2> <p> this is our very first website </p> <a href =" >This is Lancaster</a> <br><br> <!– line break -> <a href= “ <img src=" alt=“Map of Lancaster” border="0" width="104" height="142" /> </a> <center> <p><b><i> MU </i></b> <!– notice the tags here for italics, bold and center-> <br> <a href =" >Millersville University</a> </center> </body> </html> <br> <b> Nazli Hardy, Associate Professor </b> <p><i> I enjoy traveling with my family</i>
16
The Basic Tags: adding a horizontal line and an email link
<html> <head><title> EDW 647 </title></head> <body> <h2>Links and Things </h2> <p> this is our very first website </p> <a href =" >This is Lancaster</a> <br><br> <a href= “ <img src=" alt=“Map of Lancaster” border="0" width="104" height="142" /> </a> <hr> <!- - place horizontal line here --> <center> <p><b><i> CSCI</i></b> <br> <a href =" >Millersville University</a> <a href="mailto: Nazli Hardy, Associate Professor </b> </a> </center> <!- - notice the use of “mailto” to indicate that an address is coming up --> </body> </html> <br> <a Nazli Hardy, Associate Professor </b> </a> <p><i> I enjoy traveling with my family</i>
17
View Source Code You can view the source code of any webpage by clicking on the “view” tab on the top and the “view source” tab Or you can right click on the webpage itself, and clicking on “view source” Useful for: Viewing nesting structure Immediate access to comments Recovering code if you lose the _______.txt file
18
Special Characters HTML provides special characters or entity references (in the form &code;) for representing characters that cannot be rendered otherwise <p> if x < 10 then increment x by 1 </p> What is the problem here? Try typing this in your .txt file and reload your .htm file – what do you see? <p> if x < 10 then increment x by 1 </p> So the solution for the “less than” character is to type in < (ampersamd el tee) to indicate to the browser that this is a special character, and not part of a html tag which are all found within < > This website is a good reference to the symbols: Some browsers do not recognize < as less than but there are those that now are able to work with this?
19
Examples of Special Characters
Inserts a horizontal rule, with a line break before and after If everything is already in bold, then many browsers could make <strong> even bolder Inserts the special characters © and & Partially adapted from adapted from “Internet & World Wide Web: How to Program”, Deitel & Deitel
20
Examples of Special Characters
Creates a strikethrough effect Makes the 1 subscript Makes the 2 superscript Inserts the special symbols < and ¼ Emphasizes text Different browsers have different ways of emphasizing, thus <emp> Partially adapted from adapted from “Internet & World Wide Web: How to Program”, Deitel & Deitel
21
Background Color <html>
<head><title> EDW 647 </title></head> <body BGCOLOR="#ADD8E6" > <!- - body color is blue – see this page for color chart --> <h2>Links and Things </h2> <p> this is our very first website </p> <a href =" >This is Lancaster</a> <br><br> <a href= “ <img src=" alt=“Map of Lancaster” border="0" width="104" height="142" /> </a> <hr> <center> <p><b><i> CSCI</i></b> <br> <a href =" >Millersville University</a> <a href="mailto: Nazli Hardy, Associate Professor </b> </a> </center> </body> </html>
22
Font Size and Color <html> <head><title> EDW 647 </title></head> <body BGCOLOR="#ADD8E6" > <h4><u>Font Size and Color</u></h4> <p> <font size="4" color="blue"> Font size 4, blue color </font><br> <font size="5" color="green"> Font size 5, green color </font><br> <font size="2" color="#FFFF00"> Font size 2, yellow color </font><br> <font color="#FF0000"> Standard font size, red color</font><br> <!- - different font sizes and colors – see this page for color chart --> </p> </body> </html>
23
Font Face <html> <head><title> EDW 647 </title></head> <body BGCOLOR="#FE96E0" > <h4><u>Font Face</u></h4> <p> <font face="Comic Sans MS">font face Comic Sans MS (size and color are the default)</font><br> <font face="courier" size="2">font face Courier, size 2 (color is default)</font><br> <font face="helvetica, arial" color="#006633"> font face Helvetica, alternatively Arial, color: dark green (size is default)</font><br> <font color="#FF0000"> Standard size, red color (font is default)</font> </p> </body> </html>
24
Lists: Unordered and Ordered
<html> <head><title> EDW 647 </title></head> <body BGCOLOR="#F57ABC" > <h4><u>Lists – Ordered and Unordered</u></h4> <br> <ul> <!- - unordered list --> <li> mangoes</li> <!- - bullet 1 --> <li> coconut</li> <!- - bullet 2 --> <li>lychees</li> <!- - bullet 3 --> </ul> <ol> <!- - ordered list --> <li> coconut</li> <!- - bullet 1 --> <li> lychees</li> <!- - bullet 2 --> <li>mangoess</li> <!- - bullet 3 --> </ol> </body> </html>
25
Lists - Indented <html> <head><title> EDW 647 </title></head> <body BGCOLOR="#FF00FF" > <h4><u>Lists - Indented</u></h4> <br> <ul> <li> mangoes</li> <li> coconut</li> <li>Hawaiian</li> <li>Tanzanian</li> </ul> <li>lychees</li> </body> </html> What is the advantage to indenting the code?
26
Tables always start with the table tag: <table>
row tags: < tr > data tags: <td > heading tags: <th> end with the pair table tag </table>
27
Tables <html> <head><title> EDW 647 </title></head> <body BGCOLOR="#4E8975"> <h4><u>Tables</u></h4> <br> <table border = "1"> <caption> <b>Favorite Cities </b> </caption> <tr> <!– first row --> <th>Country </th> <!– heading--> <th>City </th> <!– heading--> <th>Language </th> <!– heading--> </tr> <!– end of first row --> <tr> <!– second row --> <td>France </td> <td>Cannes </td> <td>French </td> </tr> <!– end of second row --> <tr> <!– third row --> <td>Zimbabwe </td> <td>Victoria Falls </td> <td>English/ Shona </td> </tr> <!– end of third row --> </table> </body> </html>
28
Basic Syntax of HTML <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN“ " <html xmlns=" <head> <title> </title> </head> <body> <p> </p> </body> </html> Copy and paste this code toll your HTML documents
29
W3C HTML Validation Service
Programming web-based applications can be complex, and HTML documents must be written correctly to ensure that browsers process them properly Most current browsers attempt to render HTML documents even if they are invalid. This often leads to unexpected and possibly undesirable results. Use a validation service, such as the W3C MarkUp Validation Service, to confirm that an XHTML document is syntactically correct. World Wide Web Consortium (W3C) provides a validation service for checking a document’s syntax
30
More If you feel you at a complete loss, go through the entire presentation gain, instead of moving on to part 2. The Internet is filled with great resources. Review the links below for background color and font size, type and color
Similar presentations
