Designing Websites Using HTML and FrontPage A Typical Webpage View Source A webpage is a text file...
-
Upload
kenneth-hyder -
Category
Documents
-
view
215 -
download
0
Transcript of Designing Websites Using HTML and FrontPage A Typical Webpage View Source A webpage is a text file...
![Page 1: Designing Websites Using HTML and FrontPage A Typical Webpage View Source A webpage is a text file containing instructions to tell a computer how the.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551af0cb55034606048b60ae/html5/thumbnails/1.jpg)
Designing Websites
Using HTML and FrontPageUsing HTML and FrontPage
![Page 2: Designing Websites Using HTML and FrontPage A Typical Webpage View Source A webpage is a text file containing instructions to tell a computer how the.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551af0cb55034606048b60ae/html5/thumbnails/2.jpg)
A Typical Webpage
View SourceView Source
A webpage is a text file
containinginstructions to tell a computer how the page should look.
A webpage is a text file
containinginstructions to tell a computer how the page should look.
![Page 3: Designing Websites Using HTML and FrontPage A Typical Webpage View Source A webpage is a text file containing instructions to tell a computer how the.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551af0cb55034606048b60ae/html5/thumbnails/3.jpg)
Creating Webpages
•You can create a page by hand, using a text-editor like Notepad
•You can use web-based tools, eg Blogging/Content Management Systems to store your data and present it in different ways.
•You can use website authoring software,eg FrontPage, Dreamweaver to create a page, and upload it when you are ready
![Page 4: Designing Websites Using HTML and FrontPage A Typical Webpage View Source A webpage is a text file containing instructions to tell a computer how the.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551af0cb55034606048b60ae/html5/thumbnails/4.jpg)
HTML and FrontPage
FrontPage is aneditor that
enables you tocreate the
HTML codeused to make
webpages
FrontPage is aneditor that
enables you tocreate the
HTML codeused to make
webpages
![Page 5: Designing Websites Using HTML and FrontPage A Typical Webpage View Source A webpage is a text file containing instructions to tell a computer how the.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551af0cb55034606048b60ae/html5/thumbnails/5.jpg)
The HTML for our first page
HTML tags areusually in pairs
HTML tags areusually in pairs
Between the <head> and </head>
tags, you find information about
the page
Between the <head> and </head>
tags, you find information about
the page
Between the<body> and </body>
tags, you findinstructions fordisplaying text, pictures etc...
Between the<body> and </body>
tags, you findinstructions fordisplaying text, pictures etc...
![Page 6: Designing Websites Using HTML and FrontPage A Typical Webpage View Source A webpage is a text file containing instructions to tell a computer how the.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551af0cb55034606048b60ae/html5/thumbnails/6.jpg)
Adding text to our first page
Paragraph stylesParagraph styles
We can use different heading
sizes from <h1> Heading 1
(the biggest)to
<h6> Heading 6(the smallest)to make our
headings standout
We can use different heading
sizes from <h1> Heading 1
(the biggest)to
<h6> Heading 6(the smallest)to make our
headings standout
![Page 7: Designing Websites Using HTML and FrontPage A Typical Webpage View Source A webpage is a text file containing instructions to tell a computer how the.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551af0cb55034606048b60ae/html5/thumbnails/7.jpg)
Creating a blank stylesheet
We can choose aready-made template, or
we can make ourown...
We can choose aready-made template, or
we can make ourown...
![Page 8: Designing Websites Using HTML and FrontPage A Typical Webpage View Source A webpage is a text file containing instructions to tell a computer how the.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551af0cb55034606048b60ae/html5/thumbnails/8.jpg)
Selecting styles to modify
We can look attwo lists of styles.The original tags,and the ones we have changed.
We can look attwo lists of styles.The original tags,and the ones we have changed.
The computer displays a sampleto show how thetext will look,as well as theinstructions ituses for the
web browser.
The computer displays a sampleto show how thetext will look,as well as theinstructions ituses for the
web browser.
![Page 9: Designing Websites Using HTML and FrontPage A Typical Webpage View Source A webpage is a text file containing instructions to tell a computer how the.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551af0cb55034606048b60ae/html5/thumbnails/9.jpg)
Changing formatting for a style
We can changeseveral different
attributes fora paragraph
style
We can changeseveral different
attributes fora paragraph
style
![Page 10: Designing Websites Using HTML and FrontPage A Typical Webpage View Source A webpage is a text file containing instructions to tell a computer how the.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551af0cb55034606048b60ae/html5/thumbnails/10.jpg)
The Font Tab
As well as the size, styleand colour of a font,
there are other effectswe can choose...
As well as the size, styleand colour of a font,
there are other effectswe can choose...
For the background, border, line-spacing
and alignment, other tabscan be selected whenmodifying a style.
For the background, border, line-spacing
and alignment, other tabscan be selected whenmodifying a style.
![Page 11: Designing Websites Using HTML and FrontPage A Typical Webpage View Source A webpage is a text file containing instructions to tell a computer how the.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551af0cb55034606048b60ae/html5/thumbnails/11.jpg)
A CSS file
Clicking on the Styletoolbar allows you to
continue modifying styles
Clicking on the Styletoolbar allows you to
continue modifying styles
![Page 12: Designing Websites Using HTML and FrontPage A Typical Webpage View Source A webpage is a text file containing instructions to tell a computer how the.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551af0cb55034606048b60ae/html5/thumbnails/12.jpg)
Linking to a CSS file
To use a CSS file,you must first link to itfrom your HTML file...
To use a CSS file,you must first link to itfrom your HTML file...
![Page 13: Designing Websites Using HTML and FrontPage A Typical Webpage View Source A webpage is a text file containing instructions to tell a computer how the.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551af0cb55034606048b60ae/html5/thumbnails/13.jpg)
Adding a picture
The <img src> tag willdisplay a picture in ourpage. It can be modifiedby using height, width, border and alt within
the tags.
The <img src> tag willdisplay a picture in ourpage. It can be modifiedby using height, width, border and alt within
the tags.
![Page 14: Designing Websites Using HTML and FrontPage A Typical Webpage View Source A webpage is a text file containing instructions to tell a computer how the.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551af0cb55034606048b60ae/html5/thumbnails/14.jpg)
Picture Preview
One way to changea page's layout is
to use tables
One way to changea page's layout is
to use tables
![Page 15: Designing Websites Using HTML and FrontPage A Typical Webpage View Source A webpage is a text file containing instructions to tell a computer how the.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551af0cb55034606048b60ae/html5/thumbnails/15.jpg)
Adding a hyperlink
Hyperlinks make awebpage much more useful than a printout
Hyperlinks make awebpage much more useful than a printout
![Page 16: Designing Websites Using HTML and FrontPage A Typical Webpage View Source A webpage is a text file containing instructions to tell a computer how the.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551af0cb55034606048b60ae/html5/thumbnails/16.jpg)
Following links
You can testyour page
to see if the links you have made
actually work
You can testyour page
to see if the links you have made
actually work
![Page 17: Designing Websites Using HTML and FrontPage A Typical Webpage View Source A webpage is a text file containing instructions to tell a computer how the.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551af0cb55034606048b60ae/html5/thumbnails/17.jpg)
Tables!
A table doesn'thave to be usedjust for tabulardata. We canalso use it to arrange itemson a page tolook moreinteresting.
A table doesn'thave to be usedjust for tabulardata. We canalso use it to arrange itemson a page tolook moreinteresting.
![Page 18: Designing Websites Using HTML and FrontPage A Typical Webpage View Source A webpage is a text file containing instructions to tell a computer how the.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551af0cb55034606048b60ae/html5/thumbnails/18.jpg)
The table so far...
You can drag and droptext just like you
would with a word-processor
You can drag and droptext just like you
would with a word-processor
![Page 19: Designing Websites Using HTML and FrontPage A Typical Webpage View Source A webpage is a text file containing instructions to tell a computer how the.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551af0cb55034606048b60ae/html5/thumbnails/19.jpg)
Modifying a table
Once a table ismade, you have
complete control of the way boththe entire table,
or individual cellsare displayed.
Once a table ismade, you have
complete control of the way boththe entire table,
or individual cellsare displayed.
![Page 20: Designing Websites Using HTML and FrontPage A Typical Webpage View Source A webpage is a text file containing instructions to tell a computer how the.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551af0cb55034606048b60ae/html5/thumbnails/20.jpg)
Table Properties
![Page 21: Designing Websites Using HTML and FrontPage A Typical Webpage View Source A webpage is a text file containing instructions to tell a computer how the.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551af0cb55034606048b60ae/html5/thumbnails/21.jpg)
Our HTML code
![Page 22: Designing Websites Using HTML and FrontPage A Typical Webpage View Source A webpage is a text file containing instructions to tell a computer how the.](https://reader035.fdocuments.us/reader035/viewer/2022062620/551af0cb55034606048b60ae/html5/thumbnails/22.jpg)
A final preview of our page