HTML and Front Page - Lecture 13

HTML and Front PageLecture 13Summary of Previous LectureIn the previous lecture we have learnt about,Intranet, Webpage and Website Web servers Static Website and Dynamic WebsitesPurpose and definition of Information Architecture and basic problem.Common MistakesMain Concepts of Information ArchitectureStructuring, organizing and LabelingFinding and ManagingArt and scienceSummary of Previous LectureLibrary and WWWDifference between books and websitesDifference between libraries and websitesDifferent roles of Information ArchitectIA Job and RoleWhy IA matters?Example design structure of a University website.Structural schemes for website design.Navigation system in a websiteToday’s LectureHTML: The Language of the Web Writing HTMLNotepad FileSaving notepad as HTMLHTML basic Format and TagsBasic TagsHeader TagAlignmentViewing Code using a browserSummary of TodayParagraphsMoving next line in HTMLListOrdered ListsOther Common tagsSpecial Characters using HTMLImage insert in a webpageHTML TablesHyperlinksSummary of Today’s LectureFront PageWhy to use FrontPage?Auto HTML CodeHow to start FrontPageHow to Create a WebsiteTemplatesFrontPage ViewsPreviewing a WebpageMeta Tags and getting Help from Front PageSummaryHTML: The Language of the WebWeb pages are text files, written in a language called Hypertext Markup Language (HTML).HTML tells the browser how to display the pageHTML 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.HTMLHTML 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.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 notepadA Simple Notepad FileHTML Code can be written hereSaving HTML CodeSave StepsSelect DirectoryType Name of web page, with the extension .htmlSelect File Type as “All Files”13HTML Page Format Computing web! Hello World View of First Web Page!Title displayed here!Body of Page displayed hereHTML TagsAn HTML document has two elements, content and tagsThe content is what you want the user to seeThe tags are the HTML code that tells the browser how to display the contentMost opening tags need a closing one but there are a few exceptions. Tags may be either uppercase or lowercase.Basic TagsEvery HTML document has the following tags: This is displayed in the blue barThe content of your documentHeader TagsThere 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: Welcome to the Course Will be displayedAlignmentYou can align your text to the left, center, or right. The default is left. Wednesday prints the word “Wednesday” in the center of the line.Alignment of Text -ExampleRight Click on the browser View The HTML CodeClick on View SourceCode ViewParagraphs begins a paragraph and ends it. You can omit and just use to create another paragraph. leaves a line between paragraphs. computing and programming “computing and” on one line, then leaves a line blank and “programming” on the next. tag moves you to the next lineComputing for managementCourse Introduction puts “Computing for management” on one line and “Course Introduction” on the next.Note that has no closing tag.ListsThere are three types of lists, unordered, ordered, and definitionAn unordered list is a bulleted list, the tag is used, and indicates each list element. is optional: the first thing the second thingOption may be ‘circle”, “square” or “disc”An ordered list has the tag, each list element has the tag. The first thing The second thingwill display as:The first thingThe second thingOption may be “1”, “a”, “A”, “i”, or “I”Ordered ListsA definition list is a list of terms followed by their definition.The definition appears on the next line, and is offset. Junior a third year student Seniora fourth year studentWill display as:Junior a third year studentSenior a fourth year studentSome Common TagsThis Week produces This Week Monday produces MondayThis Week produces This WeekMid term produces Mid term produces a horizontal line (no closing tag required)H2O produces H2Omc2 produced mc2Special Characters Space   > & & bullet ·Inserting an Image 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. 34Tables table tag optional table title table row table column header table data element35Tables Table Caption Heading1 Heading2 Row1 Col1 DataRow1 Col2 Data Row2 Col1 DataRow2 Col2 Data Row3 Col1 DataRow3 Col2 Data 37 Element AttributesALIGN=position -- left, center, right for tableBORDER=number -- width in pixels of border (including any cell spacing, default 0)CELLSPACING=number -- spacing in pixels between cells, default about 3CELLPADDING=number -- space in pixels between cell border and table element, default about 1WIDTH=number[%]-- width in pixels or percentage of page/frame width38cellspacing=10 cellpadding=10 Table Row AttributesValid for the table row:ALIGN -- left, center, rightVALIGN -- top, middle, bottomBGCOLOR -- background color OneTwoThreeFourFiveSixHypertext linksUsed to,Point to a different section on the same pagePoint to a different web pagePoint to a variety of different web objectsLinks within the same pageFirst we need to mark the destination text with an anchorThis is done by putting before the destination text, and afterIn this example name is the name of the anchorHyperlinksThen we need to create a link, identifying the anchor that goes with this linkClassesNow when a user clicks on this link he will be directed to the anchor and the destination textNote that the # is NOT optionalLinking to Another Web PageContact me produces the text “Contact me” identified as a link Clicking on this link will send the user to the page contact.htmIn this example contact.htm MUST be in the same folder as the original web pageSuppose 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\tempYou must now create the link by writing Contact me LinkingLink to other documents on the internet CIIT websiteIf you want it to open in a different window:hypertextFront PageMicrosoft FrontPageMicrosoft 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. 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.Start FrontPageTo 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 siteTo exit FrontPage, click the Close button in the upper right corner of the program window.The FrontPage Program windowCreating a Web SiteWhen building a new Web site, you must first create a folder in which to store the files and folders in the site.Web Site TemplatesFrontPage also offers you pre-built TemplatesUse FrontPage ViewsOnce you have opened FrontPage, the View menu allows you to use the Folders view, where you can see all the files in your Web site. The View menu allows you to see your site from different perspectives. The Folders list shows all the folders and files in the site. FrontPage Folders viewFrontPage offers user friendly ViewsSaving a Web PageTwo methods:Click the Save button on the Standard toolbar.Click File on the menu bar, and then click Save.Formattinga Web PageSame options as we learnt in MS WordPreviewing a Web PageClick the Show Preview View button at the bottom of the Contents pane.Viewing the Web Page in Code ViewSplit ViewUsing Meta TagsA meta tag is an HTML tag that includes information about a Web page, such as the character set, name of its developer, how often the page is refreshed, and the keywords and description of the page’s contents.The Custom tab of the Page Properties dialog box allows you to insert meta tags.Using Meta TagsGetting Help in FrontPageClick the Microsoft Office FrontPage Help button on the Standard toolbar.SummaryToday we have been learnt,How to create a website for your business.How to use HTML Customized code to create a websiteUsing HTML is the optimal way as you can control many code redundancies in your website.FrontPageUsing FrontPageCreating websites using FrontPageAuto HTML Code using FrontPage