Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download An HTML and Web Page Primer
Document related concepts
Transcript
Amber Annett David Bell October 13th, 2011 What will happen What is this business about personal web pages? Designated location of your own web page. Introduction to HTML (Hyper Text Markup Language) Writing your own HTML Make your web page! Recurring Theme for Today: “It’s Simple!” Part 1 - Lets take a quick look: Open your internet browser (Internet Explorer and Mozilla Firefox are examples of an internet browser) Type in the following address (URL): http://www.geos.ed.ac.uk/homes So let’s take a look at what your screen looks like… Part 1 - Lets take a quick look: Part 1 - Lets take a quick look: Address (URL) Login Here List of People and Their Pages Part 1 - Lets take a quick look: Part 1 - Lets take a quick look: Part 1 - Lets take a quick look: Part 2 – Basic HTML Very simple “code” that can allow you to create simple yet informative web pages perfect for a university setting. First point you should pay attention to, when learning HTML is….. Part 2 – Basic HTML The basics are quite simple… Don’t panic: simple commands can be learned in minutes! Don’t worry: it is very hard to actually “break” something Don’t freak out! Part 2 – Basic HTML HTML can be written in any text editor such as notepad or word pad directly on the University editing page shown before When working with an external editor, note that HTML code should be saved in .html or directly copypasted into the University editor for testing Basic building blocks to create your web page… Part 2 – Basic HTML HTML is written with “Tags” Tags have a very simple characteristic to recognize and remember: Start: <open your tag here> (e.g. <body>) Stop :</close your tag here> (e.g. </body>) Example: <h1> This is my Title </h1> Congratulations, you now know the foundation for all HTML programming! Let’s take a look at some real tags to see what they do: Part 2 – Basic HTML A very simple webpage in notepad would look something like this: <html> <head> <title>Welcome</title> </head> <body> <h3>Hello world!</h3> <p>Matthew Rules!!!</p> </body> </html> Part 2 – Basic HTML Part 2 – Basic HTML: Lets See What We Can Do Now! HTML files contain HTML Elements (Sequences of Tags) Elements normally have two tags around text <H1> text </H1> Empty elements e.g. horizontal rule <HR> Elements with attributes, e.g. formatting: <H3 ALIGN=CENTER> Centred heading </H3> HTML not case sensitive Be consistent for clarity Links may be case sensitive Part 2 – Basic HTML: Lets See What We Can Do Now! The Browser creates its own space Space created around headings Space created between paragraphs White space in HTML is reduced to single space There are no carriage returns tabs or multiple spaces Part 2 – Basic HTML: Lets See What We Can Do Now! Character formatting – It’s so simple! Logical Styles (preferred – Browser decides how to display) Emphasis <EM> </EM> Strong emphasis <STRONG> </STRONG> Physical Styles Italics <I> </I> Bold <B> </B> Underline ? What do you think this would be? Comments <!–- These comments will not be displayed by the Browser --> Part 2 – Basic HTML: Lets See What We Can Do Now! Horizontal Rule <HR> Adds horizontal line across screen Line Break <BR> Starts new line without white space Part 2 – Basic HTML: Lets See What We Can Do Now! An unordered list <UL> <LI>first item <LI>second item <LI>third item </UL> (Note: the </LI> tag is not required) • first item • second item • third item An ordered list <OL> <LI>first item <LI>second item <LI>third item </OL> 1 first item 2 second item 3 third item Part 2 – Basic HTML: Lets See What We Can Do Now! Definition of Table <TABLE> <TABLEBODY> <TR> <TD> Your text </TD> <TD> More text </TD> </TR> <TR> <TD> Your text </TD> </TR> </TABLEBODY> </TABLE> Start of first row First cell Second cell End of first row Part 2 – Basic HTML: Put it Together <html> <head> <title>Welcome</title> </head> <body> <h3>Hello world!</h3> <p>Matthew Rules!!!</p> <hr> <TABLE> <TABLEBODY> <TR> <TD> Hi </TD> <TD> Mom </TD> </TR> <TR> <TD> Miss You </TD> </TR> </TABLEBODY> </TABLE> <hr> <OL> <LI>HTML <LI>IS <LI>SIMPLE! </OL> </body> </html> Part 2 – Basic HTML: Lets See What We Can Do Now! Anchor element (URL is a Web Page Address) <A HREF="URL">Text shown as a link</A> Target or Location to link to Put this at the top of the page: <A NAME="top"></A> A link to a point within the same HTML page e.g. put this at the bottom of the page: <A HREF="#top">Go to top of page</A> Part 2 – Basic HTML: Lets See What We Can Do Now! Full (or Absolute) URL Server name included so file can be on any server <A HREF=”http://www.ed.ac.uk/news/index.html”> NEWS </A> Pages on a different Web site should be opened in a new window: <A HREF=”http://www.ed.ac.uk/news/index.html” TARGET="blank"> NEWS </A> Part 2 – Basic HTML: Lets See What We Can Do Now! Image tag <IMG> No closing element Attributes SRC ALT specifies name and location of a file alternative text be displayed if image does not display File types (more info available on web) .gif .jpg (for diagrams with large areas of single colours) (for photographs) <IMG SRC="imagename.jpg" ALT=”Text about the image"> Part 2 – Basic HTML: Lets See What We Can Do Now! BORDER Specifies the width of the image border in pixels WIDTH and HEIGHT Specify the size of the image in screen pixels It is better to reduce the number of pixels! ALIGN sets position to LEFT, RIGHT, etc. <IMG SRC=“images/matthew.jpg" ALT=“Matt on top of Blackford Hill“ TITLE=“Blackford Hill” BORDER="0" ALIGN=RIGHT WIDTH=300 HEIGHT=500> Part 3 – Lets Build Something! This is where you can write your HTML Part 3 – Lets Build Something! A “Word” kind of Editor [Doesn’t Always Work!] Part 3 – Lets Build Something! This is where you can add/remove/modify Menu Items Part 3 – Lets Build Something! Folder creation for storing and organizing files Part 3 – Lets Build Something! Making a new page for more HTML and menu items Part 3 – Lets Build Something! Adding Images/Pictures to include in your site Part 3 – Lets Build Something! Add a file to your site (good for downloading) Eg: PDF file Part 3 – Lets Build Something! Lets modify code! Part 3 – Lets Build Something! What does this look like? Part 3 – Lets Build Something! What does this look like? Part 3 – Lets Build Something! What does this look like? Part 3 – Lets Build Something! The editor What does this look like? Not in the menu yet! Part 3 – Lets Build Something! Part 3 – Lets Build Something! Part 3 – Lets Build Something! Part 3 – Lets Build Something! Part 3 – Lets Build Something! Finally – Best Practices Don't use image files that are more than ca 150 k. 300 x 300 pixels should be adequate Use jpeg compression to reduce file size Don't use images unless you have full copyright permission Create links to other people's images on the Web but don't steal them! Include acknowledgements in the ALT text Finally – Best Practices HTML must conform to the standard Use HTML version 4.0 or 4.01 avoid non-standard HTML Use an HTML validator, e.g. http://validator.w3.org/ Display your page in Internet Explorer Select menu: View / Source Select Edit / Select All, then Edit / Copy This copies all of your HTML plus all the additional HTML added by Zope (i.e. the GeoSciences banner, the menus, etc.) to the clipboard Go to http://validator.w3.org/ Paste your document int the “Validate by Direct Input” box Press “Check” Correct any errors and repeat. Note there may be errors in the Zope headers that you cannot edit. Finally - Construct Your Web Page cf. https://www.geos.ed.ac.uk/website/editweb/
