1 / 47

IT 130

IT 130. Internet and the WWW. Introduction to HTML. What is HTML?. A simple, universal mark-up language HTML = H yper T ext M arkup L anguage Just a series of tags that are integrated into a text document

ccarole
Download Presentation

IT 130

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. IT 130 Internet and the WWW Introduction to HTML

  2. What is HTML? • A simple, universal mark-up language • HTML = HyperText Markup Language • Just a series of tags that are integrated into a text document • Like stage directions - silently telling the browser what to do, and what props to use. • Can be created in a simple text editor

  3. Creating your Web pages In order to create your own web pages you need: • A simple text editor (for example:Notepad) • An HTTP browser for testing the pages(for example:Internet Explorer, Netscape) • Browsers:http://dir.yahoo.com/Computers_and_Internet/Software/Internet/World_Wide_Web/Browsers/ • Browser statistics:http://www.w3schools.com/browsers/browsers_stats.asp • A Web server on which to store your files and make them available for viewing.(for example:students.depaul.edu)

  4. Creating Web pages • Each page on your web site corresponds to an HTML file • HTML files • are written in ASCII text format • should have the extension .html or .htm • should have a “644” permission • Pictures should also be uploaded to students.

  5. Naming in HTML Files: • should begin with a letter • should not contain spaces • should indicate the contents or purpose of the page

  6. HTML Tags • Usually English words (example: "blockquote") or abbreviations ("p" for paragraph) • Are distinguished from the regular text because they are placed inside small angle brackets (example: <p> or <blockquote>) • Tags dictate: • How the page will be formatted (<p> begins a new paragraph) • How the words appear (<b> makes text bold) • Provide information that doesn't appear on the page itself (example: <title> tag).

  7. HTML tag syntax • Generally tags come in two parts • Beginning tag: <html> • Ending tag: </html> The two parts mark off a part of the text and specify its format. • Most tags support various attributes.<tag attr1=“value”>item to be formatted</tag> • Appearance of the web page depends also on the specific browser settings, and the user’s system and monitor.

  8. Capitalization in HTML • HTML is not case sensitive • XHTML is case sensitive! • Be consistent • Lowercase is preferred in html • Lowercase is required in the new XHTML standard.

  9. Basic tag types • Document tags: identify the various parts of the document (Head, Body). • Text structure tags: determine the layout of the text (lists, paragraphs). • Style tags: tell the browser how to display the text. • Image tags: to incorporate images. • Anchor tags: to create hyperlinks.

  10. Header and Body • The header is enclosed by the <head> and </head> tags • Contains information about a page that won't appear on the page itself, such as the title. • The body is enclosed by <body> and </body> • Where the action is • Everything that appears on the page is contained within these tags.

  11. The <p> Tag • Creates a new paragraph • Skips a line from the previous item • A <p> tag is one of the few tags that doesn't need to be closed off by a corresponding </p> in HTML, however, the new XHTML standard does require closing tags.

  12. Headlines • <h1> turns on large headlines • </h1> turns off large headlines • <h3> turns on medium sized headlines • </h3> turns off medium sized headlines • <h6> turns on small headlines • </h6> turns off small headlines

  13. Example Notepad or Textpad window <html> <head> <title>My First Web Page</title> </head> <body> <h1>I love HTML!</h1> <p>This is our first try using HTML. So far it seems pretty easy. </p> <p>I hope we get to memorize every single HTML tag in this class. </p> </body> </html> Save as .html

  14. Viewing Source Code • Every Web page you visit is actually just a plain text document • In Netscape: choose Page Source from the View menu • In Explorer: choose Source from the View menu

  15. Commenting Your Code • Comment does not appear on your web page • You can use it for personal reminders or notes to the people you're working with • visible to anyone who views your source code • Do not include any embedded HTML code in commented text because the results are unpredictable. • <!--This is an example of a comment.-->

  16. Hyperlinks : Anchor Tags • Link your site to any other page or file in your site, or on the Internet • Default text is blue and underlined • Normally the link opens in the same browser window

  17. Hyperlinks • <a href=“…."> and </a> • <a> means “anchor point” • href= means hypertext reference • “….” Is where you put the URL you want to reference • Example • <a href="http://www.depaul.edu">Visit the DePaul site.</a> Visit the DePaul site

  18. Hyperlinks • Relative: • In same directory • href=“filename.html” • In a subfolder • href=“subfoldername/filename.html” • Up a directory • href=“../filename.html” • Absolute: • Include entire URL • Example: href=“http://condor.depaul.edu/~gandrus/index.html”

  19. Mailto • Links to an email address • Example • <a href="mailto:yourname@hotmail.com"> Email me</a>. Email me

  20. Relative pathnames Example, you want to insert inside file1.htm a hyperlink to file2.htm • <a href=“file2.htm”> If file2 is in the same folder as file1 • < a href=“foldername/file2.htm”>If file2 is in a child folder (subfolder) • < a href=“../file2.htm”>If file2 is in a parent folder It is important that the folder structure on your local machine matches the directory structure on students.

  21. Relative path public_html hw3.html main.html pic2.jpg IT130 Images HW3_d Link main.html to hw3.html: Link hw3.html to main.html: Link hw3.html to pic2.jpg: <a href=“HW3_d/hw3.html”> <a href=“../main.html”> <a href=“../Images/pic2.jpg”>

  22. A few Style tags • <i>…</i>Italic • <b>…</b>Boldface • <u>…</u>Underlined • <strike>…</strike>crosses out a word by having a line drawn through it • <sub>…</sub>generates subscripts • <sup>…</sup>generates superscripts

  23. Font Tag (depreciated) • <font> … </font>usedto change the color, size, and face of any portion of text • Font tag has three attributes • Font color: <font color=“#0000FF”> • Font size: < font size=“+3”> • Font face: < font face=“Arial”> • The size attribute is relative to the text before it. • See next slide for prefered method.

  24. Using CSS to style fonts • Example: • Instead of writing <font color=green size=12pt face=verdana>This text is different</font> • We would first define a CSS style rule like:span.txt1 {color: green; font-size: 12pt; font-family: verdana} • And then use this rule in the body of our HTML document, like so:<span class=“txt1”>This text different</span>

  25. Horizontal Rules • <hr> produces a horizontal line • Default is shaded engraved line • In HTML the <hr> tag has no end tag. • In XHTML the <hr> tag must be properly closed, like this: <hr /> • Attributes • <hr size=number>: how thick is the line • <hr width=number of pixels or percent>: Default horizontal rule is as wide as the page • <hr align=left|right|center> • <hr noshade>: the line appears as a solid bar

  26. Breaks • <br> inserts a line break • Does not skip a space as <p> does • In HTML the <br> tag has no end tag. • In XHTML the <br> tag must be properly closed, like this: <br /> (the space after br is required)

  27. Special Characters

  28. Special Characters (cont’d)

  29. Aligning Text • <p align=“left”> aligns a paragraph to the left • <p align=“right”> aligns a paragraph to the right • <p align=“center”> centers a paragraph • Better - do it in CSS • <p style=“text-align: left”> aligns a paragraph to the left</p> • Similarly for aligning right and center

  30. Lists Two types: • Unordered lists • Ordered lists

  31. Unordered lists • An unordered (or bullet) list uses the tag pair <ul> … </ul> • Each item in the list is preceded by a single list item tag <li> • It produces an indented list with a browser-supplied character in front of it (a small circle or a square) • You can specify the type of symbol used by using the TYPE attribute <ul type=“disc”><li>Items</ul> Other possible types are:square|circle

  32. Example <html> <head> <title> Lists </title> </head> <body> <h1>Here is an example of a list</h1> <ul> <li>First item</li> <li>Second item</li> </ul> <ul type=“square”> <li>Third item</li> <li>Fourth item</li> </ul> </body> </html> • First item • Second item • Third item • Fourth item

  33. Ordered lists • An ordered list uses the tag pair <ol>… </ol> • Each item in the list is preceded by a single list item tag <li> • This also produces an indented list but the items are ordered. • The default is to order by numbers (like this)

  34. Example <html> <head> <title> …. </title> </head> <body> <h1>An example of a ordered list</h1> <ol> <li>First item</li> <li>Second item</li> </ol> </body> </html> • First item • Second item

  35. Attributes for ordered lists • typecan change the type of numbering used in a list. • type = “I” Uppercase Roman numerals • type = “i” Lowercase Roman numerals • type = “A” Uppercase Latin letters • type = “a” Lowercase Latin letters • start can change where the lists begins the • numbering. • start = “3” Starts from 3 instead of 1 • start = “2” Starts from b instead of a

  36. Example <html> <head><title>ECT270 Lists</title></head> <body><h1>To do list</h1> <ol type =“A” > <li>Pick up dry cleaning</li> <li>Clean the house <ul> <li>Sweep the floors</li> <li>Take out garbage</li> <li>Clean kitchen</li> </ul></li> <li>Stop by post office <ul> <li>Get stamps <ul> <li>Overseas airmail</li> <li>Domestic</li> </ul></li> <li>Mail package</li></ul></li> </ol> </body></html>

  37. Nested lists • Both ordered and unordered lists can be nested. • This is done by starting a new list before the current list has ended. • There is no limit to the number of levels of nesting. • Use indenting in the source code to distinguish between each level of nesting.

  38. For Assignments Review of how to: • Post your pages, • transfer files to students with SSH, • check permissions, • what should your file structure be

  39. Where do we put it? • File structure on your account should be: • public_html (directory) • IT130 (sub-directory in above directory) • files (.html or text etc.) in the directory ‘IT130’ • Image files in a sub-directory of IT130 named “Images”.

  40. your account (root) mail Your directory structure

  41. Hosting your site • You will host your site on the server called “students”. • Accounts on “students” are provided by DePaul. • Off campus specify the host name as“students.depaul.edu”

  42. How to connect to “students” • Start SSH • Choose Quick Connect • Enter Username and Password (see next slide)

  43. How to connect to students • Instead of “janedoe”, use your username • When prompted for a password, enter yours.

  44. Permissions • Be sure to check that your permissions are set correctly! • Right click on public_html and look at “properties” • Make sure it looks like this:

  45. About HW Assignment 3 • Starting from scratch, and using only Notepad (or similar text editor), you will be creating 3 pages, and link them together. • One page is your “Assignment list” page that you will be updating after every HW. • The other 2 pages are the first versions of your Website’s ‘Homepage’ and ‘AboutUs’ page.

  46. HW3:Part 2: Your “Assignments.html” page • This page will be a list or table of contents for all your assignments. • It will contain links to all of your homework assignments • Create the page on your local machine • Name it “Assignments.html” • Upload it to your IT130 directory on students.

  47. Example My assignments Gary Andrusgandrus@cdm.depaul.edu Homework1Homework2 Homework3Homepage About Us Homework4 Homepage About Us Another page Homework5 Homework6

More Related