Creating a Webpage

Creating a webpage – Basic HTML Matthew Mobbs e: mjm33@le.ac.uk web: http://www2.le.ac.uk/Members/mjm33 twitter: mjmobbs

Your first webpage Open Notepad <HTML> HTML always works in pairs! Open and close! </HTML> This mean it is a WWW page

What is a page without a title! <HTML> <HEAD> <TITLE> Your name webpage </TITLE> </HEAD> </HTML>

Check your work… File Open the file. It will open in Internet Explorer. Is the name is the Title Bar the same as you typed? Save As Name the file Save as .html

Adding and Formatting the Page <BODY> <HTML> <HEAD> <TITLE> Your name webpage </TITLE> </HEAD> <BODY> The page content or body </BODY> </HTML>

Headings We use different heading styles to break-up page content Increased number = Smaller heading

Add a Heading to your page <H1> <BODY> Add Heading <CENTER> <H1> Your Name </H1> Centre Text </CENTER> Add a line <HR> </BODY> Save and Review your page

Writing a Paragraph <P> <P> Your name is doing a <STRONG>MA Humanities</STRONG> degree at the <I>University of Leicester</I>. Your name first degree was <B>Your degree</B> from <I>first degree institution</I> </P> <BODY> <CENTER> <H1> Your Name </H1> </CENTER> <HR> <P> </P> </BODY>

“Quoting” <BLOCKQUOTE> </P> In the quote say why you chose to study this course… “I’m studying MA Humanities…” <BLOCKQUOTE> <P> “Your Quote” </BR> <I>Says Your Name</I> </P> </BLOCKQUOTE> </BODY>

Lists <OL> or <UL> </BLOCKQUOTE> <OL> is a numerical or ‘ordered’ list Module Module 1 Module 2 Writing for the web <H3>Modules</H3> <OL> <LI>Module 1</LI> <LI>Module 2</LI> <LI>Writing for the Web</LI> </OL> </BODY>

Lists <OL> or <UL> </BLOCKQUOTE> <UL> is a bullet or ‘unordered’ list Writing for the web ,[object Object]

HTML<H3>Module</H3> <OL> <LI>Module 1</LI> <LI>Module 2</LI> <LI>Writing for the Web</LI> <UL> <LI>Web Design</LI> <LI>HTML</LI> </UL> </OL> </BODY>

Hyperlinks <A HREF= <P> Your name is doing a <STRONG>MA Humanities</STRONG> degree at the <A HREF=“http://www.le.ac.uk”> <I>University of Leicester</I> </A> . Your name first degree was <B>Your degree</B> from <I>first degree institution</I> </P>

Structuring a Website Home About Us Events Resources What the service is Writing Future Events Staff Essays Past Events Matt Mobbs Maths Handouts

Structuring a Website Home About Us Resources Events Writing What the service is Future Events Staff Past Events Essays Matt Mobbs Handouts Maths

Structuring a Website Home About Us Resources Images Events Writing What the service is Future Events Staff Past Events Essays Matt Mobbs Handouts Maths

Download and structure your site my -website Go to http://tinyurl.com/y9ev4rc Downloads the Page ‘webdesign.html’ and put in a folder called ‘modules’ Download the image ‘htmlcode.png’ and put in a folder called images index.html modules webdesign.html images htmlcode.gif

Dreamweaver A more sophisticated web editing package To Install: Start All Programs CFS Software 2 Select & Remove Software Select Dreamweaver 8.0.2 from the list Add and Done

Getting started with Dreamweaver From the Files list select ‘Manage Sites’

Getting started with Dreamweaver When the pop-up box appears select New…

Getting started with Dreamweaver Go to the Advanced options Name your site ‘My Website’ Locate the folder you created containing your website Locate the image folder Select OK

Features of Dreamweaver Select ‘Split’ Open index.html

Features of Dreamweaver Top: HTML code Text can be formatted using toolbar. E.g. colour and size Top: How it will appear online

Insert Hyperlink to Subpages Open index.html Highlight the words ‘Writing for the Web’ in the Module list Select the ‘browse’ icon in the ‘Link’ creator in the Properties toolbar. Browse to webdesign.html in the modules folder of your website and select

Hyperlink HTML <LI><a href=“module/webdesign.html”>Writing for the Web</a></LI> You can see the website structure in the link…folder/page Complete the link…add title <LI><a href=“module/webdesign.html” title=”Writing for the Web">Writing for the Web</a></LI> This instructs user what the link will open, used by users with visual impairments

Insert Image Open webdesign.html Place the cursor at the bottom of the page. Select: Insert -> Image Browse to the htmlcode.png image you downloaded and select. When this box appears complete the Alternate text with ‘Basic HTML’. ALT describes what the images is, used by screen readers to assist visually impaired users <imgsrc="../image/html.png" alt="Basic HTML”>

Complete the image Add a Boarder <CENTER> <P> <imgsrc="../image/html.png" alt="Basic HTML" BORDER="2px"> </P> </CENTER> Name the image “2px” how many pixels wide the boarder is. <CENTER> <P> <imgsrc="../image/html.png" alt="Basic HTML" BORDER="2px"> </P> <H4>Basic HTML</H4> </CENTER>

Hyperlink back to homepage On the webdesign.html page, in the HTML code, below the image add: </H4> <P> RETURN HOME </P> </CENTER> Highlight the word RETURN HOME. Add the link to index.html In the HTML add your ‘title’

Note the link <a href="../index.html" title="MA Humanities Home">RETURN HOME</a> ../ means ‘go up a level’ in the folder structure

Larger structures Home About Us Resources Images Events Writing Link from ‘Matt Mobbs’ to ‘Home’ ../../HOME Need to go up two level = 2 x ../ What the service is Future Events Staff Past Events Essays Matt Mobbs Handouts Maths

Larger structures Home About Us Resources Images Events Writing Link from ‘Matt Mobbs’ to ‘Home’ ../../HOME Need to go up two level = 2 x ../ What the service is Future Events Same applies to images <imgsrc="../../image/matt.jpg”> Up two, down one Staff Past Events Essays Matt Mobbs Handouts Maths

Creating a Webpage

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (19)

Destaque

Destaque (6)

Semelhante a Creating a Webpage

Semelhante a Creating a Webpage (20)

Mais de Matthew Mobbs

Mais de Matthew Mobbs (20)

Último

Último (20)

Creating a Webpage