Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Writing Your Own Web Page with HTML
Document related concepts
Transcript
Writing Your Own Web Page with HTML World Wide Web Provides multimedia communication over the Internet Terminology: URL, HYPERTEXT, HOMEPAGE, SERVER, ISP, LINK, WEBSITE HTML is the language of the ‘Web HTML History Different versions, each improving on the last HTML2, HTML3, HTML4 and now HTML 5 is being worked on as a “draft” Outlined and controlled by the World Wide Web Consortium (W3C) let by Timothy Berners-Lee ◦ Berners-Lee developed the idea of HTML Anyone can participate in development of the WWW Preparing a Web Site Writing vehicle ◦ Programming in HTML ◦ Authoring software Browser ◦ Test the code locally ◦ Test the code on the server Server ◦ Test links to other sites ◦ Store your published site Organization of a website • Hierarchical – Home page provides general overview, defines main links for the pages further down in the hierarchy – Pages contain more specific information – Links to move up or down – Readers can easily know their position in the structure • Linear (sequential) – Home page is the title or introduction – Links move from one page to another, typically forward and backward – Very rigid – Limits your readers’ freedom to explore • Combination of Linear and Hierarchical – Links to move up or down, forward or backward – Readers lose their mental positioning when crossing hierarchical boundaries by moving forward or backward • Web organization – Little or no overall structure HyperText Markup Language (HTML) HyperText ◦ Active text ◦ Link ◦ Clicking causes an action Markup Language ◦ Tags indicate formatting and document structure ◦ Source code is processed by a program that understands the tags and formats the page (a web browser) Programming in HTML Type tags into a text file (Notepad) ◦ HTML editor ◦ HTML code must be saved with .html extension Authoring Software WYSIWYG Create web page visually HTML code is generated automatically See image on next slide Process: Preparing a Web Page Use writing vehicle to create web site Test locally using the browser Connect to Internet using your browser Test the links to other sites Publish the site to your server Test the site by accessing from the server HTML - Basic Tags Tag – tells browser how to display the information provided Enclosed in angle brackets < > Generally used in pairs ◦ Open tag ◦ Closing tag : same tag with / in front You can nest tags Tags cannot overlap (<i><b>WordUp!</i></b> is bad form, not guaranteed to work) HTML- Document Tags <HTML> … </HTML> ◦ Beginning and end of every HTML document <HEAD> … </HEAD> ◦ Contains information about the document including the title that is to appear in the title bar <BODY> … </BODY> ◦ All content for the page is placed between these tags HTML – Basic Tags <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> If you view this from the browser, you will see a blank page HTML Basic Tags <TITLE> … </TITLE> Causes the page title to be displayed in the title bar Place in the heading section between <HEAD> … </HEAD> HTML – Basic Tags Add content between <BODY> … </BODY> Text Structure Tags ◦ ◦ ◦ ◦ Headings Paragraphs Lists Images HTML – Creating and Testing Open text editor Enter basic document tags <HTML> <HEAD> … </HEAD> <BODY> … </BODY> </HTML> Save as .html Do not close text editor HTML – Creating and Testing Open your browser Type file path/name as the URL or use File Open and select the file The file name should appear on the title bar The main window should be blank Do not close the browser HTML – Creating and Testing Return to the open file in the text editor Add a <TITLE> tag inside <HEAD> Save Return to the browser Click refresh or reload button Check the title bar HTML – Creating and Testing Add one tag at a time to create content After each addition ◦ Save the file in the text editor ◦ Refresh/reload the file in the browser ◦ Verify that your entry is correct HTML Text Tags – Heading Tags <H1> … </H1> Largest heading <H2> … </H2> <H3> … </H3> <H4> … </H4> <H5> … </H5> <H6> … </H6> Smallest heading <H1>Theatre Schedule</H1> HTML Text Tags – Paragraph Tag <P> … </P> ◦ Blank line inserted before the start of the paragraph One space between adjacent words regardless of the number of spaces in the source Extra spaces and lines are ignored <P>Learning HTML is a lot of fun!</P> HTML Text Tags - Break <BR> Forces a new line <P>Learning HTML is a lot of <BR>fun!</P> Displays as: Learning HTML is a lot of fun! HTML List Tags <UL> … </UL> ◦ Unordered list (bulleted list) <OL> … </OL> ◦ Ordered list (numbered list) Every item in a list is preceded with <LI> List contents are indented HTML Formatting Tags Make page more attractive Make page more functional Style Tags ◦ Logical ◦ Physical HTML Formatting Tags – Logical Style Tags Browser dependent Emphasis Tag ◦ <EM> … </EM> ◦ Usually displays italics Strong emphasis Tag ◦ <STRONG> … <STRONG> ◦ Usually displays boldface HTML Formatting Tags – Physical Style Tags Tell browser how to display the text Italics <I> … </I> Boldface <B> … </B> Center <CENTER> … </CENTER> Images Use images that are appropriate and attractive Use sparingly since they effect download time Obtaining Images Download from a site that offers free images ◦ Pay to use an image ◦ Scan an image/document that you own or have permission to use Digital camera Create original graphics using software Image File Formats Acceptable image formats vary by browser Generally acceptable formats are ◦ GIF Graphics Interchange Format Used for graphics like clipart ◦ JPG Joint Photographic Experts Group Use for photographs ◦ PNG Portable Network Graphics Expected to replace GIF HTML – Image Tag Inline image Loaded with HTML code ◦ <IMG> Attributes: ◦ ◦ ◦ ◦ SRC ALT HEIGHT WIDTH <IMG SRC=“hello.jpg”> <IMG SRC=“hello.jpg ALT=“Hello!” WIDTH=“50%”> HTML – Link Tag (HREF) Link to ◦ Other sites ◦ Between your own pages ◦ To e-mail <A HREF=”name”>hypertext</A> <A HREF=”http://www.kodak.com”>Kodak</A> <A HREF=”johnpage.html”>John’s Page</A> <A HREF=”mailto:[email protected]”>John’s mail</A> Changing Font <FONT>…</FONT> ◦ Attributes SIZE=“…” (font size, 1 through 7) COLOR=“…” (font colour) FACE=“…” (font type) <FONT SIZE=“3” COLOR=“#FF9933” FACE=“tahoma”> …</FONT> HTML Tags – Background Colour and Graphics Attributes of <BODY> ◦ BGCOLOR=”code” Specify color for background of the screen ◦ BACKGROUND=”path/file” Tiles the graphic in the file to fit the screen <BODY BGCOLOR=”green”> <BODY BGCOLOR=”#00FF00”> <BODY BACKGROUND=”abcpict.jpg”> CSS – Cascading Style Sheets Introduced in HTML 4.01 Current versions of HTML want to separate content from presentation (format or appearance.. its “look”) The HTML tags like <P> and <BR> are used for basic formatting Text and background colour, dropcaps, placement on the page and other complex formatting features would can be controlled by CSS Style Sheet in HTML 4 Style sheets add more design control and separate this design from HTML itself ◦ ◦ ◦ ◦ External style sheets apply the same style rules to all pages Embedded style sheet apply style rules to a single page Inline styles apply style rules to page elements Cascading Style Sheet (CSS) refers to the capability for style information from more than one source to be combined Example of style sheet code ◦ BODY { background-color: #CCFFCC; font-family: Arial, Helvetica, sans-serif; color: #330066 } ◦ A:link { color: #330066 } ◦ A:visited { color: #660000 } ◦ A:hover { color: #FFCC00 } ◦ A:active { color: #FF0000 } Multimedia – Adding Sound and Video External Multimedia ◦ Any media file that cannot be automatically loaded by a Web browser ◦ Helper applications (or viewers) handle different external media files that are not directly supported by your browser Sound File Extensions: ◦ ◦ ◦ ◦ .au (fully cross-platform) .aiff (Macintosh) .wav (Windows) MPEG Audio .mp2, .mp3 (cross-platform) < A HREF=“anthem.au”><IMG SRC=“flag.gif”></A> Multimedia – Adding Sound and Video Video Files Extensions ◦ MPEG .mpeg, .mpg ◦ .mov ◦ .avi < A HREF=“dumbo3.mov”>hypertext</A> Inline Multimedia ◦ Inline video <IMG DYNSRC=“rainstorm.avi” SRC=rainstorm.gif”> ◦ Inline sounds <BGSOUND SRC=“trumpet.au”>
