1 / 63

HTML and Front Page

HTML and Front Page. Lecture 13. Summary of Previous Lecture. In the previous lecture we have learnt about, Intranet, Webpage and Website Web servers Static Website and Dynamic Websites Purpose and definition of Information Architecture and basic problem. Common Mistakes

oakleyr
Download Presentation

HTML and Front Page

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. HTML and Front Page Lecture 13

  2. Summary of Previous Lecture In the previous lecture we have learnt about, • Intranet, Webpage and Website • Web servers • Static Website and Dynamic Websites • Purpose and definition of Information Architecture and basic problem. • Common Mistakes • Main Concepts of Information Architecture • Structuring, organizing and Labeling • Finding and Managing • Art and science

  3. Summary of Previous Lecture • Library and WWW • Difference between books and websites • Difference between libraries and websites • Different roles of Information Architect • IA Job and Role • Why IA matters? • Example design structure of a University website. • Structural schemes for website design. • Navigation system in a website

  4. Today’s Lecture • HTML: The Language of the Web • Writing HTML • Notepad File • Saving notepad as HTML • HTML basic Format and Tags • Basic Tags • Header Tag • Alignment • Viewing Code using a browser

  5. Summary of Today • Paragraphs • Moving next line in HTML • List • Ordered Lists • Other Common tags • Special Characters using HTML • Image insert in a webpage • HTML Tables • Hyperlinks

  6. Summary of Today’s Lecture • Front Page • Why to use FrontPage? • Auto HTML Code • How to start FrontPage • How to Create a Website • Templates • FrontPage Views • Previewing a Webpage • Meta Tags and getting Help from Front Page • Summary

  7. HTML: The Language of the Web • Web pages are text files, written in a language called Hypertext Markup Language (HTML). • HTML tells the browser how to display the page • HTML can be displayed using a web browser. • Different browsers may interpret this code differently (according to their defaults) and display the page differently. • Look at your web page using different browsers like Microsoft Internet Explorer, FireFox etc.

  8. HTML • HTML has a set of rules, called syntax. • syntax are a set of standards or specifications developed by a consortium of Web developers, programmers, and authors called the World Wide Web Consortium (WC3) • Simple web pages are often saved as “.html” or “.htm” extension.

  9. Where to Write HTML? • We generally use an HTML editor (e.g. FrontPage, Dream Weaver) to create a web page. Importance of HTML still exists because, • Often editors add extra code that we want to delete. Knowing HTML allows us to know what we should keep and what is unnecessary. • HTML Code can be written using simple notepad

  10. A Simple Notepad File HTML Code can be written here

  11. Saving HTML Code

  12. Save Steps Select Directory Type Name of web page, with the extension .html Select File Type as “All Files”

  13. HTML Page Format <HTML> <HEAD> <TITLE>Computing web! </TITLE> </HEAD> <BODY> <H1> Hello World </H1> <! Rest of page goes here. This is a comment. > </BODY> </HTML> 13

  14. Title displayed here! Body of Page displayed here View of First Web Page!

  15. HTML Tags • An HTML document has two elements, content and tags • The content is what you want the user to see • The tags are the HTML code that tells the browser how to display the content • Most opening tags need a closing one but there are a few exceptions. • <HTML> …… </HTML> • Tags may be either uppercase or lowercase.

  16. Basic Tags • Every HTML document has the following tags: <HTML> <HEAD> <TITLE> This is displayed in the blue bar</TITLE> </HEAD> <BODY> The content of your document </BODY> </HTML>

  17. Header Tags • There are 6 sizes of Headers, H1 is the largest and H6 is the smallest. All are in larger and more prominent font than regular text. Syntax is: <H1> Welcome to the Course </H1> Will be displayed

  18. Alignment • You can align your text to the left, center, or right. The default is left. <H2 align = center> Wednesday</H2> prints the word “Wednesday” in the center of the line.

  19. Alignment of Text -Example

  20. Right Click on the browser Click on View Source View The HTML Code

  21. Code View

  22. Paragraphs • <p> begins a paragraph and </p> ends it. • You can omit </p> and just use <p> to create another paragraph. • <p> leaves a line between paragraphs. • <p> computing and </p><p>programming</p> “computing and” on one line, then leaves a line blank and “programming” on the next.

  23. <br> tag • <br> moves you to the next line • <p>Computing for management<br>Course Introduction</p> puts “Computing for management” on one line and “Course Introduction” on the next. • Note that <br> has no closing tag.

  24. Lists • There are three types of lists, unordered, ordered, and definition • An unordered list is a bulleted list, the <ul> tag is used, and <li> indicates each list element. </li> is optional: <ul type = option> <li> the first thing <li> the second thing </ul> Option may be ‘circle”, “square” or “disc”

  25. Ordered Lists • An ordered list has the <ol> tag, each list element has the <li> tag. <ol type = “1”> <li> The first thing <li> The second thing </ol> will display as: • The first thing • The second thing Option may be “1”, “a”, “A”, “i”, or “I”

  26. A definition list is a list of terms followed by their definition.The definition appears on the next line, and is offset. <dl> <dt>Junior<dd> a third year student <dt>Senior<dd>a fourth year student </dl> Will display as: Junior a third year student Senior a fourth year student

  27. Some Common Tags <B>This Week</B> produces This Week <I> Monday</I> produces Monday <B><I>This Week</I></B> produces This Week <u>Mid term</u> produces Mid term <hr> produces a horizontal line (no closing tag required) H<sub>2</sub>O produces H2O mc<sup>2</sup> produced mc2

  28. Special Characters Space &nbsp; < &lt; > &gt; & &amp; bullet &middot;

  29. Inserting an Image <img src=“filename”> If the image file is in the same folder you do not have to put the complete path, just the file name. Otherwise, a full pathname is required.

  30. <img src = website.gif>

  31. Tables <TABLE> table tag <CAPTION> optional table title <TR> table row <TH> table column header <TD> table data element 34

  32. Tables • <TABLE BORDER=1> • <CAPTION>Table Caption</CAPTION> • <TR><TH>Heading1</TH> <TH>Heading2</TH></TR> • <TR><TD>Row1 Col1 Data</TD><TD>Row1 Col2 Data</TD></TR> • <TR><TD>Row2 Col1 Data</TD><TD>Row2 Col2 Data</TD></TR> • <TR><TD>Row3 Col1 Data</TD><TD>Row3 Col2 Data</TD></TR> • </TABLE> 35

  33. <TABLE> Element Attributes ALIGN=position -- left, center, right for table BORDER=number -- width in pixels of border (including any cell spacing, default 0) CELLSPACING=number -- spacing in pixels between cells, default about 3 CELLPADDING=number -- space in pixels between cell border and table element, default about 1 WIDTH=number[%]-- width in pixels or percentage of page/frame width 37

  34. cellspacing=10 cellpadding=10 38

  35. <TR> Table Row Attributes Valid for the table row: ALIGN -- left, center, right VALIGN -- top, middle, bottom BGCOLOR -- background color <TABLE ALIGN="center" WIDTH="300" HEIGHT="200"> <TR ALIGN="left" VALIGN="top" BGCOLOR="red"><TD>One</TD><TD>Two</TD> <TR ALIGN="center" VALIGN="middle" BGCOLOR="lightblue"><TD>Three</TD><TD>Four</TD> <TR ALIGN="right" VALIGN="bottom" BGCOLOR="yellow"><TD>Five</TD><TD>Six</TD> </TABLE>

  36. Hypertext links Used to, • Point to a different section on the same page • Point to a different web page • Point to a variety of different web objects

  37. Links within the same page • First we need to mark the destination text with an anchor • This is done by putting <a href=“#name”> before the destination text, and </a> after • In this example name is the name of the anchor

  38. Hyperlinks • Then we need to create a link, identifying the anchor that goes with this link • < a href=“#name”>Classes</a> • Now when a user clicks on this link he will be directed to the anchor and the destination text • Note that the # is NOT optional

  39. Linking to Another Web Page <a href= “contact.htm”>Contact me </a> produces the text “Contact me” identified as a link Clicking on this link will send the user to the page contact.htm In this example contact.htm MUST be in the same folder as the original web page

  40. Linking Suppose the link is on your page which is located in the folder C:\Homework, but the page you want to link to is located in C:\labwork\temp You must now create the link by writing <a href= “C:\labwork\temp\contact.htm”> Contact me </a>

  41. Link to other documents on the internet <a href = http://www.ciit.edu.pk> CIIT website</a> If you want it to open in a different window: <a href=“url” target = window>hypertext</a>

  42. Front Page

  43. Microsoft FrontPage • Microsoft FrontPage is a tool to help you develop, maintain, and publish your Web sites. FrontPage lets you: • Insert text and graphics • Import and export files • Add, test, and repair hyperlinks • Easily view and manage the entire Web site • There are even templates included to get you started.

  44. FrontPage creates the HTML code • FrontPage uses a graphical interface that allows anyone with Windows experience to develop Web pages. • It creates the HTML code for you and the Web browser interprets it to display your pages correctly. • It can also be used to create websites.

  45. Start FrontPage • To start FrontPage, click the Start button, point to All Programs, point to Microsoft Office, and select Microsoft Office FrontPage 2003. • The Getting Started task pane allows you to open a new or existing Web page or Web site • To exit FrontPage, click the Close button in the upper right corner of the program window.

  46. The FrontPage Program window

More Related