19
HTML 5 In this presentation I will be using HTML5. I will be demonstrating how to insert paragraphs into a HTML document. I will be styling the document in CSS.
| Date post: | 05-Dec-2014 |
| Category: |
Self Improvement |
| Upload: | beretta21 |
| View: | 1,915 times |
| Download: | 2 times |
HTML 5
In this presentation I will be using HTML5.
I will be demonstrating how to insert paragraphs into a HTML document.
I will be styling the document in CSS.
Paragraphs Paragraphs
Paragraphs separates text so that it is easier for readers to read and understand.
I have chosen paragraphs to demonstrate because they are used in everyday documents, web pages and any electronic or hard copy, text based documents.
AccessibilityAccessibilityI have made the web page accessible by following the WCAG 2.0 guidelines.
The text and layout of the web page auto fits to the window size when changed.
I used simple text that is easy to read, I have not used any distracting colours and have not designed it in way which is known to cause seizures.
The code I will be using Code that will be used
<html></html>
<!DOCTYPE html>
<head></head>
<title></title>
<body></body>
<p></p>
Document Type Definition
This defines the webpage
This is the header where it provides a brief description of the document.
This is where you put the title of the document.
The body provides the main source of information needed to create the document.
Paragraphs of text – This is the element I have chosen to focus on and show you how to format.
The code will look like thisCode will look like this
<!DOCTYPE html>
<html> <head> <title>Paragraphs</title></head>
<body> <p>This is a paragraph</p> <p>This is another paragraph</p>
</body></html>
Insert the text you want in between the <p> </p> tags.
Each paragraph tag will separate your text.
Validating the codeValidating the codeMake sure your code is valid before putting it into the html document.
Listed below is a website you can use to check if your code is valid.
http://validator.w3.org
If your code is valid, the next step is to download Notepad ++. This program is what you will be entering your code into.
Validating the codeValidating the codeIf your code is valid it should look like this.
Notepad ++Notepad ++Enter the code into Notepad++
You will need to put this code into your HTML document to link it to the CSS document. You must provide the css file name into the link.
<link rel="stylesheet" href="Paragraphs2.css">
Saving html documentsSaving the documentMake sure you save all the documents in the same folder
Save the document as html
Different Browsers Different Browsers Open the document and test it in a few different browsers to see if it works
The two browsers I have selected to test are Internet Explorer and Firefox
Styling CSSStyling CSSThe first step to styling in CSS is creating a new document in Notepad++.
When saving your document, save it as .css
CSS – how they work togetherCSS and HTML
The style I am trying to achieve is simple but is still presentable.
The background colour I have chosen to use is grey. I will be creating a table in HTML to act as a border for my web page.
The colours I have decided to go with are black and blue with white background for the text.
I will be using black text as it is easy to read on a white background. The font I have chosen is Arial.
The style I have chosen will make paragraphs usable and easy for the viewer to see.
CSS Styling CodeCSS styling code
body { font-family: Georgia, "Times New Roman", Times, serif; color: black; background-color: #66CCFF}
This has changed the text front to Times new Roman.
This has changed the colour of the background to blue and the text to black.
Validating CSSValidating CSSMake sure your CSS code is valid, you can check this by using this website. http://jigsaw.w3.org/css-validator/validator
CSS Styling CodeCSS styling codeThe code should look like this. Make sure you save it as a .css file.
Styling code I will be using in htmlHTML styling code<table style="width:100%;border:0;" border="0"><tr><td colspan="2" style="background-color:black;">Header</td></tr><tr><td style="background-color:#6699FF;width:5%;text-align:top;"></td><td style="background-color:#eeeeee;height:200px;width:70%;text-align:top;"> </td></tr><tr><td colspan="2" style="background-color:black;">Footer</td></tr></table>
This creates the table of the webpage.
This creates the header of the table, I have chosen to have this black.
This creates the footer of the table, I have chosen to have this black to match the header.
This creates the blue side of the table, you can use this as a side menu but I have chosen to put this is for colour and style.
This creates the white background for the text to be inserted.
Styling code I will be using in htmlHTML styling code<table style="width:100%;border:0;" border="0"><tr><td colspan="2" style="background-color:black;">Header</td></tr><tr><td style="background-color:#6699FF;width:5%;text-align:top;"></td><td style="background-color:#eeeeee;height:200px;width:70%;text-align:top;"> </td></tr><tr><td colspan="2" style="background-color:black;">Footer</td></tr></table>
The width and border size can be changed to your liking .
The colour and size can be changed for this header.
The colour and size can be changed on this footer.
The background colour and size of this can be modified.
The background colour, size and alignment can be altered, but it is recommend that an easy to read colour is selected.
Different browsersDifferent BrowsersAfter saving the CSS and HTML pages, test out the web pages and test them in a few different bowsers. I have chosen to test them in Internet Explorer and Firefox.
End Result
