Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • What Is A Web Page

    Enviado por

    Anish PD
    17 visualizações38 páginas
    .net

    Título original

    What is a web page

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    DOCX, PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento
    .net

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato DOCX, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    17 visualizações38 páginas

    What Is A Web Page

    Enviado por

    Anish PD
    .net

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato DOCX, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 38

    What is a web page?

    In this section, you're going to learn just what a web page is and how it can be read by a browser like Internet Explorer or Firefox. You'll also construct your very first web page. Let's make a start. Files on your computer come with extensions. If you wrote a letter using Microsoft Word and saved it with the name 'MyLetter', the software would add four letters to the file name (three in older versions). Because it was typed using Word, the four letters that get added to your filename are .docx. So your file name will be 'MyLetter.docx' and not just 'MyLetter'. If you created a spreadsheet in Microsoft Excel and called it 'Accounts' the Excel software will add its own four letter extension to your file name. It will add .xlsx. So you file name will be 'Accounts.xlsx' and not just 'Accounts'. So you get a different four letter extension depending on the software you used. These extensions are very important to computers. They are used to identify the type of file it is. With a file extension, Word can recognise its own documents. It sees the letters docx and says 'Ah yes, that's one of mine. I can open it.' If it sees a different extension, xlsx for example, it says 'What the heck is that?' You may then get an error message telling you that the file type is not recognised. Web pages have their own file extensions. Oddly there are two different extensions, a three letter file extension and a four letter extension. Web pages come with the extension .htm or .html. A browser can recognise either extension. When you open up a web page with your browser, Internet Explorer for example, the browser software checks the file extension, the same check that Word and Excel make. If it sees the .htm or .html extension it knows it's a web page and then tries to open it. (Modern browsers, though, can open up other types of files. Internet Explorer can open up your Word documents and PDF files.) Behind the scenes, however, the thing that Internet Explorer is trying to open is really a text file that has had its extension changed from .txt to .htm. The text file though will have special symbols and words, called Tags. When the browser sees these Tags it goes to work, displaying whatever you typed and hiding the Tags from your viewers. Most web pages on the internet are written in code called HTML. HTML stands for HyperText Markup Language, and is fairly easy to get the hang of. That's because HTML is not a programming language: it is a language designed to improve the presentation of text. For example, in Microsoft Word, if you want a nice big heading, you can select a font size from a menu. HTML has an easy way to change the size of text of headings, too, which you'll see in a moment. But that's basically all you are doing with HTML ' presenting text and images on a page. The way you do this is with things called TAGS.

    Computer Courses

    Home Beginners Computing Word 2007 to 2013 Word 2000 to 2003 Excel 2007 to 2013 Excel to 2003 Excel VBA Programming for Beginners > Web Design < Javascript Visual Basic .NET Beginners PHP C# .NET Java for Beginners

    Buy Our Books


    VB Net eBook - 5.49 C# Net eBook - 5.49 5 Programming Books: 10

    HTML Tags
    HTML is written in something called tags. Tags come in pairs, an opening one and a closing one. The first pair of tags we'll write are the HTML tags themselves. You put one HTML tag at the top, and one at the bottom: <HTML> </HTML> This tells a browser like Internet Explorer or Firefox that the code is HyperText Markup Language. Two things to notice here. One, that the word HTML is surrounded by angle brackets (the Less Than and Greater Than keys on your keyboard); and two that the second Tag has a forward slash before the HTML.

    All your tags must be surrounded by the angle brackets < >. This tells the browser that there is some HTML code that needs executing, and that it is not to be shown on the web page. Miss an angle bracket out and it can really mess up your web page. So add those two tags to your text editor and it will look like this:

    The first Tag tells the browser to start doing something; the second tag tells the browser to stop doing it. The stop symbol is that forward slash. So miss that out and, again, your web page can really be messed up. The next pair of tags are the HEAD tags: They go between the two HTML ones: <HTML> <HEAD> </HEAD>

    </HTML> Again, notice that both the HEAD tags are surrounded by angle brackets, and there is a forward slash before the final one </HEAD>. The HEAD section of HTML page is where you put special instructions for the browser. Your browser will not print directly to a web page when things are inserted into the HEAD section. For example, if you wanted to display the words 'Hello World' on your page, and you typed them in between the two HEAD tags, then the Browser would just ignore them. That's because 'Hello World' is direct text, and not a special instruction that the browser can understand. A special instruction your browser can understand is the TITLE tag: <TITLE> </TITLE> The Title tag always goes in the HEAD section of the HTML skeleton.

    The TITLE tag doesn't do very much. And it definitely should not be confused with the name of your web page. If you saved your web page as MyFamily.html then that would have no bearing on or relationship with the TITLE tag. Whatever you type between the two TITLE tags is what

    appears at the very top of your browser window. And that's it, that's all it does. (You'll see what it looks like in a moment.) The final, and most important part, of the HTML skeleton is the BODY section.

    In between those two BODY tags is where you'll write most of your HTML code. Think of the BODY as the white page in Word Processing. When you type something in your word processing software, it is immediately displayed. Similarly, when you type something between the two BODY tags and then view the results in a browser, whatever you typed will be displayed. As long as it's not a tag, your browser will try to display it for you. So remember: if you want people to see it, put it between the BODY tags. In your text editor, then, add the following:

    Notice that we've added some text between the two TITLE tags: My First Page. We've also used indenting, but this is only for readability: the indenting doesn't have any effect on the results.

    Computer Courses

    Home Beginners Computing Word 2007 to 2013 Word 2000 to 2003 Excel 2007 to 2013 Excel to 2003 Excel VBA Programming for Beginners > Web Design < Javascript Visual Basic .NET Beginners PHP C# .NET Java for Beginners

    Buy Our Books


    VB Net eBook - 5.49 C# Net eBook - 5.49 5 Programming Books: 10

    HTML Tags
    HTML is written in something called tags. Tags come in pairs, an opening one and a closing one. The first pair of tags we'll write are the HTML tags themselves. You put one HTML tag at the top, and one at the bottom: <HTML> </HTML> This tells a browser like Internet Explorer or Firefox that the code is HyperText Markup Language. Two things to notice here. One, that the word HTML is surrounded by angle brackets (the Less Than and Greater Than keys on your keyboard); and two that the second Tag has a forward slash before the HTML. All your tags must be surrounded by the angle brackets < >. This tells the browser that there is some HTML code that needs executing, and that it is not to be shown on the web page. Miss an angle bracket out and it can really mess up your web page. So add those two tags to your text editor and it will look like this:

    The first Tag tells the browser to start doing something; the second tag tells the browser to stop doing it. The stop symbol is that forward slash. So miss that out and, again, your web page can really be messed up. The next pair of tags are the HEAD tags: They go between the two HTML ones: <HTML> <HEAD> </HEAD>

    </HTML> Again, notice that both the HEAD tags are surrounded by angle brackets, and there is a forward slash before the final one </HEAD>. The HEAD section of HTML page is where you put special instructions for the browser. Your browser will not print directly to a web page when things are inserted into the HEAD section. For example, if you wanted to display the words 'Hello World' on your page, and you typed them in between the two HEAD tags, then the Browser would just ignore them. That's because 'Hello World' is direct text, and not a special instruction that the browser can understand. A special instruction your browser can understand is the TITLE tag: <TITLE> </TITLE> The Title tag always goes in the HEAD section of the HTML skeleton.

    The TITLE tag doesn't do very much. And it definitely should not be confused with the name of your web page. If you saved your web page as MyFamily.html then that would have no bearing on or relationship with the TITLE tag. Whatever you type between the two TITLE tags is what appears at the very top of your browser window. And that's it, that's all it does. (You'll see what it looks like in a moment.) The final, and most important part, of the HTML skeleton is the BODY section.

    In between those two BODY tags is where you'll write most of your HTML code. Think of the BODY as the white page in Word Processing. When you type something in your word processing software, it is immediately displayed. Similarly, when you type something between the two BODY tags and then view the results in a browser, whatever you typed will be displayed. As long as it's not a tag, your browser will try to display it for you. So remember: if you want people to see it, put it between the BODY tags. In your text editor, then, add the following: Notice that we've added some text between the two TITLE tags: My First Page. We've also used indenting, but this is only for readability: the indenting doesn't have any effect on the results. DOCTYPE

    One special tag is DOCTYPE. It's not really a HTML tag, but an instruction to the browser about which version of HTML is allowed. In version of HTML prior to HTML 5 the DOCTYPE could be very messy. In HTML 5, however, it's just this: <!DOCTYPE HTML> DOCTYPE needs to go at the very top of the page. There is no end tag for DOCTYPE. Note the exclamation mark after the first angle bracket, and the space between DOCTYPE and HTML. So add a DOCTYPE to the top of your page. Your text editor will look something like this: Coming up next, we'll take a look at how to save your web pages.

    Saving Web Pages


    To save your code as a web page, click the File menu at the top of Notepad (or whatever Text Editor you are using.) From the File menu, select Save As. The Save As dialogue box appears (We created a new folder to store all our web pages in, and called the folder HTML)..

    Note the default extension at the bottom, under 'Save as type' It says, Text Documents (*.txt). If you leave it on that then you won't have web page, you'll have a text file. Click on the drop down list and change it to 'All files'. (You don't need to do this if you're using TextEdit on a Mac. Just type firstwebpage.html in the Save As box.)

    In the File Name box, type firstwebpage.html

    Note that we've used all lowercase letters. This is not strictly necessary, but is recommended. Also, try not to add spaces to web page names as this can cause problems. You can use underscores or hyphens, though. So these two are OK: first_web_page.html first-web-page.html But these two should be avoided: first web page.html

    FirstWebPage.html Click on Save and you'll have a HTML page that can be displayed in a browser.

    Basic HTML - Heading Tags


    You can have a nice big heading on your web page quite easily. This is done with the H tags. The biggest size heading you can have is H1. If you want smaller sized headings then you change the number after the H. You can have up to 6 different sizes. All headings need to go between the two BODY tags. Try it out for yourself. Open up the code for your firstwebpage.html file, if it's not already open. (If it's not, you can now right-click and Send To > Notepad. If you didn't get this working then simply click File > Open from the menu at the top of your text editor.) Add the following just below your first BODY tag: <H1>A Size 1 Heading</H1> Incidentally, tags are not case sensitive. So you can have this: <h1>A Size 1 Heading</h1> Or even this: <h1>A Size 1 Heading</H1> But using all capital letters makes your code more readable. Once you've added the H1 tags, though, your HTML should look like this:

    To see what it looks like, open Windows Explorer or Finder on the Mac, if it's not already open. Navigate to where you saved your web page to, and then double click to open it up. (If you already have the page open, simply press F5 to refresh the page.) You should see this in your browser:

    Switch back to your code and change the 1's into 3's. So your HTML heading should now be this: <H3>A Size 3 Heading</H3>

    Save the changes. Go back to your browser and press F5 to refresh the page. You should see this:

    Notice how much smaller the H3 heading is compared to the H1 heading. (If your headings don't look right, make sure you haven't missed any angle brackets out, or any forward-slash closing tags.)

    Paragraph and BR breaks


    If you've ever used a word processor like Microsoft Word then you know that to start a new paragraph all you need to do is to hit the Enter key on your keyboard. The cursor will then move down, ready for you to start typing. In HTML, however, you can't do this. If you want to start a new paragraph, you have to use the P tags. To try it out, add the following just below your Heading (You can use your own text, though, rather than type out the Hamlet soliloquy): <P>To be, or not to be: that is the question: Whether 'tis nobler in the mind to suffer the slings and arrows of outrageous fortune, or to take arms against a sea of troubles, and by opposing end them? </P> <P>To die: to sleep; no more; and by a sleep to say we end the heart-ache and the thousand natural shocks that flesh is heir to, 'tis a consummation devoutly to be wish'd.</P> When you've finished, your HTML code should look like this: (Don't worry about the indenting, though. We did ours just so it would look nice in this book. Only one press of the spacebar is recognised in HTML, everything else is ignored, including indents and carriage returns.)

    Note the P tags: <P></P> You have to use the P tags whenever you want to start a new paragraph. Strictly speaking, though, you don't need the closing P tag. You can just do this to start a new paragraph: <P> To be, or not to be: that is the question: Whether 'tis nobler in the mind to suffer the slings and arrows of outrageous fortune, or to take arms against a sea of troubles, and by opposing end them?

    <P> To die: to sleep; no more; and by a sleep to say we end the heart-ache and the thousand natural shocks that flesh is heir to, 'tis a consummation devoutly to be wish'd. The result is the same. But in modern web coding, it's best to use the closing tag for paragraphs, so that you can add Styling rules. (You'll learn how to do this a little later.) Save your work and view the results in your browser. You should see this:

    Notice the paragraphs breaks in the text. Notice, too, that although our code was indented, this doesn't show up in the browser. The browser will ignore all those indents we had, and any extra white space. If you want white space you have 'tell' the browser. You do this with the break tags, like P and BR (which you'll see soon). As an exercise, try deleting the P tags in your code. Save and refresh your browser. Watch what happens:

    Without the P tags the text just runs on. There is still, however, a paragraph break after the heading, even though we deleted all the P tags. This is because the H heading tags insert their own paragraph breaks.
    The BR tag

    The BR tag is used when you don't want a full paragraph break. The space between lines of text is then reduced. The BR tag doesn't need a closing tag, and can be just by itself. As an example, add the following to the end of your text (the BR part). <P>To die: to sleep; no more; and by a sleep to say we end the heart-ache and the thousand natural shocks that flesh is heir to, 'tis a consummation devoutly to be wish'd. <BR> ... Rest of Hamlet's Soliloquy goes here </BODY> </HTML> Notice that we've deleted the end P tag for the second paragraph. If you leave it in, you'll get a double line break from the two <P> tags, as well as a single line break from the <BR> tag.

    Save your changes and switch to your browser. Press F5 to refresh the page and the results should look like this:

    So if you don't want a full, double-line break then remember to use the BR tag. And careful of the end P tags or you'll end up more line breaks than you expected.

    In the next lesson, we'll take a look at bold and italic text.

    Bold and Italics


    Two more tags that come in useful are the Bold and Italic tags. They are quite easy to use. Here are the Bold tags: <B> </B> And here are the Italic tags: <i> </i> The text you want to change goes between the two tags: <B> ... Rest of Hamlet's Soliloquy goes here</B> <i> ... Rest of Hamlet's Soliloquy goes here</i> If you want Bold and Italic text then you can nest the two: <B><i> ... Rest of Hamlet's Soliloquy goes here</i></B> The two I tags go between the two B tags. You can have it the other way around, though, with the I tags first: <i><B> ... Rest of Hamlet's Soliloquy goes here</B></i> Be careful of this, however: <i><B> ... Rest of Hamlet's Soliloquy goes here</i></B>

    This is a mismatched pair of tags. The two tags on the inside are B and I, and the ones on the outside are I and B. A modern browser will probably correct the mismatch, but older ones may not. Try it in your HTML code:

    Save and view the results in your browser:

    There is also an underline tag you can use: <U> ... Rest of Hamlet's Soliloquy goes here</U> You can nest all three tags: bold, italics, and underline: <U><B><i> ... Rest of Hamlet's Soliloquy goes here</i></B></U> All this nested HTML code can be a bit messy, however. The modern solution is to use something called a Cascading Stylesheet. Using a Stylesheet allows you to do all your text formatting in the HEAD section, or better yet in an external file. (You'll see how to do all this shortly.)

    HTML Lists
    You can insert a bulleted list onto your page with HTML. There are two types of lists to choose from: Ordered List and Unordered. An Ordered list is one that uses number, letters, roman numerals, or a combination. Like this:

    An Unordered List is one that uses bullets. Like this:

    To get a list with numbers or letters, this tag is used: <OL> </OL>

    The OL stands for Ordered List, of course. But those two tags won't get you a list. You need to include another tag, the LI tag. LI stands for List Item. You need one pair of LI tags for every item in your list. So for three items, the code is this:

    (Strictly speaking, you don't need the end LI tags.) To get the bulleted list, the UL tag is used. UL stands for Unordered List. It's used in exactly the same way. Just substitute the OL tags for UL tags. For both the Ordered and Unordered list, you can specify which type you want to use for the bullets or numbers. The types are these:

    You use the Types like this:

    You can specify a start, as well. But the start has to be a number:

    So that List will be uppercase letters, starting at the 7th letter, or 'G'. There are three types of bullets you can use for unordered lists: Disc, Circle, and Square. You use them like this:

    The default is Disc. So if you want round black circles for your bullets, you can miss the TYPE attribute off:

    And here are the results in a browser:

    Try out the various lists in your HTML code, and add the different types to the code. That way you will get a feel for how they are used, and what they look like.

    An Introduction to Cascading Style Sheets


    HTML was not intended to be a graphic design tool. It was set up as a simple way to display text in a browser, rather like a word processor displays text on a page. Tags were added over the years in order to add a bit of colour and life into the basic white page (actually, grey at first). So along came things like images, tables, frames, and forms. These could all be presented on the page using straight HTML code. Web designers clamoured for a better way to present their work on a web page. Plain HTML just wasn't enough. After all, with HTML, in order to get text or an image exactly where you want it, you have to resort to complicated tables to force the alignment. And suppose you want colour behind a single paragraph of text, and not have to colour the entire page? Very tricky with straight HTML. And what about hyperlinks? Is there any way, with HTML, that we can turn the underline on and off? These questions, and many more, were finally addressed by the introduction of Cascading Stylesheets. A Style is, basically, just another way to manipulate elements on a page, in order to bring a spark of life into your web design.

    What is a Stylesheet?

    If you were using a word processor like Microsoft Word, you could tell the word processor how you want blocks of text to be formatted. For example, all of your page Headings could be in 28 point Times, bold, and coloured red. If you wanted the same Heading again, you can just click a drop down list and select the Heading style you set up. Using straight HTML, you can't do that. There's no way to apply the same formatting with a single Tag. Cascading Stylesheets, however, let you do precisely that ' change whole blocks of text with a single tag. This not only makes your code easier to read, it is also very simple to change all the formatted blocks of text to say a different font size or font colour. For example, in HTML, if you want to set the first paragraph of every page to bold and italics, you'd have to do this for every single paragraph that needs it:
    <P> <B><i>This is the first paragraph on page One. The same font styles are needed for each page on my web site.</i></B> </P>

    With Stylesheets, you can get rid of all that code, and place it in the HEAD section of your page. You would then just apply the Style to any paragraph that needs it. Like this:
    <P Class = "FirstParagraph"> This is the first paragraph on page one. The same font styles are needed for each page on my web site. </P>

    The new code, I'm sure you'll agree, looks much cleaner. And if you decided that the text colour should be blue, you can just make one change to your Stylesheet code and all the first paragraphs of your pages would change. A stylesheet is set up by using the word STYLE in between two angle brackets. An end STYLE tag is needed to tell the browser to stop formatting the style: <STYLE> </STYLE> Your stylesheet code then goes between the two Style tags. Here's a style that can change text blue: <STYLE> .Font1 { Color: Blue } </STYLE> <P Class =" Font1"> This is my text. </P> Although you may not understand the code layout yet, the point is that you can add other styles to the one above that we have called Font1. We can add a bold style and a size style: <STYLE> .Font1 { Color: Blue; Font-size: 24pt; Font-weight: Bold; } </STYLE>

    Now the part of the code where we applied the style (P Class = Font1) will have its text updated. We don't have to make any changes at all to the P part of the code. So a style is way to change blocks of code (or even individual words) and apply formatting to the block as a whole. You don't need individual HTML tags in the BODY of your page; just using the style name once will ensure that your formatting is applied to the whole block.

    Cascading Style Sheet Rules


    We've produced a video to go with this lesson. It's recommended that you read the text below as well, though. The video is here: Cascading Stylesheet Rules

    A Cascading Stylesheet rule tells the browser what the HTML looks like, and what it should do. A rule can dictate what just one HTML tag should look like, or you can construct your own rule to be applied as and where you want it. For example, a rule can be set up that tells the browser to format every <P> tag so that its first line is indented. Or you could construct your own paragraph rule, and just apply the style to certain paragraphs, not all paragraphs. There are three parts to a Rule: The Selector, the Property, and the Value.

    The Selector

    There are three different kinds of CSS Selector: An HTML selector, a Class selector, and an ID selector. An HTML Selector is the text part of an HTML tag. The complete paragraph tag is <P>. So its Selector is just P ' in other words, strip the angle brackets off and you get the HTML Selector. A Class Selector is one you set up yourself, to be used anywhere on your page. The Font1 from our STYLE example above was a Class Selector. We picked the name ourselves and then applied the style to some text on the page. An ID Selector is similar to a Class selector, but you use them to identify a particular element, a text box element on a form, for example. Here's an example of what all three selectors look in a STYLE tag.

    The first one, H1, is the HTML Selector. Notice that it has had its angle brackets removed. With an HTML selector, all the HTML tags on the page will be formatted in the style you have set. So for H1 above, all the text between the <H1></H1> tags on the page will now be in Red. The second one, .NewFont, is the Class selector. Note that a class selector must start with a full stop (period). Then you type the name for your selector (anything you want). No space is added between the full stop and the name of your selector. The third one, #NewTextboxColour, is the ID selector. An ID selector starts with the hash/pound (#) symbol. You then type the name you want to use for your ID selector. Again, no space is added between the symbol and the name of your selector.

    Property and Value

    Once you have set up your Selector, you then define the Properties and Values for that selector. The Property for the selector is the thing you're trying to change. Examples are: Font, Color, Background, Margin, Text. The Value for the selector is the new setting for the property. For example, for our COLOR property, we can set it to a value of an actual colour (red, blue, yellow), or a colour code (#FFFF00, #000000). The property and the value are enclosed in curly brackets { }. The syntax for the whole thing would then be: Selector {Property: Value} An example is: H1 {Color: Red} H1 is the selector, Color is the property, and Red is the value of the property. Note the colon ( : ) after the Property. This is used to separate a Property from a Value, so that the browser knows which one is which. If you want to add more than one property and value, there are two way to do it: all on one line, with each pair of properties and values separated by a semi-colon ( ; ). Or you can put each pair of properties and values on multiple lines separated by a semi-colon ( ; ). Like this: H1 {Color: Red; Font-weight: Bold; Font-Size: 16pt;}

    The multiple lines version is this:

    The multiple lines version is easier to read. So, to sum up:


    A CSS rule has three parts, a Selector, a Property, and a Value The Selector can be a HTML selector, a Class selector, or an ID selector You separate the Property and Value from the Selector by enclosing them in curly brackets, a left curly bracket first { and a right curly bracket to close the rule } A Property is separated from a Value by a colon ( : ) If you're using more than one pair of properties and values for the same selector, separate them with semi-colons ( ; )

    Where to put your styles


    STYLES can be inserted into three locations: Inline, Embedded, and External.

    Inline Style Sheets

    You can place a style tag directly in a HTML Tag. This is called Inline. Inline styles will override ones placed elsewhere. Here's an example of an Inline style: <H1 STYLE = 'Color: Red'>My Heading</H1> To place a style in a HTML tag, do the following:

    Type the Tag you want to change Next, type a space and then the word STYLE Type an equals sign ( = ) after the word STYLE Type a double quote mark Type the Property followed by a colon Type the Value Type the another double quote mark Type the right angle bracket ( > ) of the HTML tag

    Embedded Style Sheets

    Embedded styles go in the HEAD section of your HTML page. When you embed a style in the HEAD section, you use the two tags to tell the browser where the style starts and ends. You can add a TYPE attribute, if you want. But modern browsers don't need it.

    Then in between the two STYLE tags, you would type your CSS Rules.

    Computer Courses

    Home Beginners Computing Word 2007 to 2013 Word 2000 to 2003 Excel 2007 to 2013 Excel to 2003 Excel VBA Programming for Beginners > Web Design < Javascript Visual Basic .NET Beginners PHP C# .NET Java for Beginners

    Buy Our Books


    VB Net eBook - 5.49 C# Net eBook - 5.49 5 Programming Books: 10

    Where to put your styles


    STYLES can be inserted into three locations: Inline, Embedded, and External.

    Inline Style Sheets

    You can place a style tag directly in a HTML Tag. This is called Inline. Inline styles will override ones placed elsewhere. Here's an example of an Inline style: <H1 STYLE = 'Color: Red'>My Heading</H1> To place a style in a HTML tag, do the following:

    Type the Tag you want to change Next, type a space and then the word STYLE Type an equals sign ( = ) after the word STYLE Type a double quote mark Type the Property followed by a colon Type the Value Type the another double quote mark Type the right angle bracket ( > ) of the HTML tag

    Embedded Style Sheets

    Embedded styles go in the HEAD section of your HTML page. When you embed a style in the HEAD section, you use the two tags to tell the browser where the style starts and ends. You can add a TYPE attribute, if you want. But modern browsers don't need it.

    Then in between the two STYLE tags, you would type your CSS Rules.
    External Style Sheets

    Instead of typing the <STYLE> tags and the code for all your CSS rules in the HEAD section, you can type it all in a separate text file. You then 'tell' the browser where the text file is. The text file (along with its code) is then treated as though it were in the HEAD section. You set up an External stylesheet like this:

    To embed a stylesheet the LINK tag is used. The REL attribute tells the browser that you want to link to a stylesheet; the TYPE tells the browser what sort of file is being used; the HREF attribute tells the browser the name of the file, and where the file is. (You haven't done file referencing yet, so don't worry about HREF for the moment.)

    External stylesheets have a big advantage over embedded ones because they can be used for all the pages in your web site. All you need do is insert the LINK tag in the HEAD section of your website's pages. With Embedded stylesheets, you would have to have the same STYLE code in the HEAD section of every page. External Stylesheets can save you a heck of a lot of typing (or copying and pasting). External stylesheets are just text files, so you can write them in any text editor. Something like Windows Notepad is ideal. Here's a screenshot of an external stylesheet written with Notepad:

    Note that no TAGS are used in the external stylesheet. There are no <STYLE> tags or HTML tags, just the Selectors and their Properties and Values. Note, too, that three styles have been set up. You can do this with embedded STYLE tags as well. You can have as many different styles as you want between one pair of <STYLE> </STYLE> tags. If you are using external stylesheets, you are not limited to only one. You can use as many external stylesheets as you need. All that is required is a different LINK tag for each stylesheet. When saving your external stylesheets, you don't have to save it with the extension .css. You can save it with the extension .txt. In the HREF part of your LINK tag, you would then have this: HREF = style1.txt instead of HREF = style1.css
    In the next part, you'll learn how to use your CSS selectors.

    How to use CSS Class and ID Selectors


    You have seen how to set up a stylesheet. And you know that if you set up a HTML selector, then all the HTML tags will have their values reset with the new values you specified. For example if you had this:

    Then all the H1 headings you used between the two BODY tags would have the text between the two <H1> tags coloured red.

    In other words, to use your new HTML selector, you don't have to add anything else to your HTML code. Just use the tag in the normal way. However, Class and ID selectors are slightly different.

    Using Class Selectors

    To set up a Class Selector, the code was this: .ClassSelector {Property: Value} First, you type a full stop (period). Then you type the name of your Class Selector (which can be anything you want). The Property and Value are then as normal. An example is this:

    The .FontOne is the Class Selector, a name we made up ourselves. In between the curly brackets, we're then saying 'Every time this Rule is applied, the colour of the text will be red". You can use this new Rule inside a normal HTML tag. Like this: <H1 Class = "FontOne">My Heading</H1> When applying your new Class Selector Rule, the word 'Class' is used. You then type an equals sign ( = ), followed by the name you gave your Class Selector. In our case, this was FontOne. But note that the full stop (period) is now missing from the start of the selector name. If you put the full stop in, your Rule won't work. Note that although we've used quote marks around the Class name, this is not strictly necessary. It is recommended, though.
    Using ID Selectors

    You use an ID selector in exactly the same way that you use the Class selectors. The only difference is in the word used when applying the Rule. Instead of Class you use ID:

    This is what the above code would look like in a web page:

    But that's enough of the theory for now. Let's get some practical work done. We'll go through the various ways you can add a STYLE to your web pages using your text editor. The first code

    we're going to write will centre a heading on a page. You can then use the same code to centre anything on your page. Click below to get started.

    Inline and Embedded Styles


    Inline Styles

    Open up the HTML template text file you created at the start of the course. Click File > Save As in Notepad. Save the file with the name newpage.html. Don't forget to change the Save as type box to All Files before clicking the Save button, if you're using Windows. Add some text for the TITLE tag. Add an H1 heading, with some text between the two H1 tags. Now add a paragraph of text below the H1 heading. To create an Inline Style, click after the first H1. Tap the space bar on your keyboard. Type the following: <H1 style=text-align:center> Make sure there is no space after the colon and before the word 'center'. Your HTML code should look something like ours below:

    (One thing British English users should note is the two different spelling of the word 'centre'. American English is used in HTML, so it's 'er' rather than 're'.) When you have finished typing the code, view the results in your browser. You should see that the heading is centred on your page:

    So if you want to centre things on a page, you need to use the text-align property. After a colon, you add the value. In this case center. (In previous versions of HTML you could use the HTML tags <CENTER> to centre things on a page. However, in the new version of HTML, version 5, this tag is now withdrawn (deprecated).

    Exercise As well as using center after the text-align: property you can use the following: left, right. Try them out for yourself. Simply replace the word center with one of the other text-align options.

    Embedded Styles

    As was mentioned, Embedded Styles go in the HEAD section of your code. To try them out, add the following highlighted CSS to your code:

    So the text alignment we've added is to align right. However, the Inline Style is for centre alignment. So which one gets executed? Save your work and refresh your browser page. You won't see any changes. That's because the Inline Style will override the embedded one in the HEAD section. Delete the Inline Style for the H1 heading. You should then just have this for the H1 heading: <H1>Centred Heading</H1> Save your work and refresh the web page in your browser. It should look like this, now:

    The heading is right-aligned.

    Exercise Change the value of the text-align property to Center. Save your work and Refresh the page in your browser.

    In the next lesson, you'll learn about how to handle fonts with CSS.

    CSS and Fonts


    In HTML versions prior to the new version, which is HTML 5, you could specify a Font with HTML tags. If you wanted Arial, for example, you could do this: <FONT face="Arial, Helvetica, san-serif">Some text here</FONT> However, In HTML 5 the FONT tag is deprecated. That doesn't mean you can't use it anymore, as browsers are backward compatible, meaning that older code will work with all browsers. But if you want to go with the modern way of doing things then fonts, font sizes, and font colours should be done with a Stylesheet.

    To change the font on your page, the font-family CSS property is used: font-family: arial, helvetica, sans-serif; You specify the family because the person viewing your page might not have the first font on your list. In which case, the second font is tried, then the third. (You can have more than three, if you want. Or less than three.) You can specify a single font instead, but not everybody has that fancy font you like so much. In which case, they would get the default, which is usually a serif font. NOTE: A serif is mark or embellishment on the vertical or horizontal line of text. Here's an example of the serif font Times New Roman:

    A sans-serif font is one without marks or embellishment. Just straight lines, in other words. Here's the sans-serif font Arial:

    And here are some default font families you can use quite safely: Times New Roman, Times, Serif Courier New, Courier, Mono Georgia, Times New Roman, Times, Serif Verdana, Arial, Helvetica, Sans-Serif Geneva, Arial, Helvetica, San-Serif Try them out for yourself with the following font-family style added to your H1 code:

    Save and refresh your browser. The heading should change from a default serif font to one of the sans-serif fonts: Arial, Helvetica, sans-serif. But your browser should look like this:

    Now try one of the other font-families on the list. Here's what your browser will look like if your try Courier New, Courier, Mono:

    In the next lesson, you'll learn about font colours.

    Font Colors
    We've produced a video to go with this lesson. It's recommended that you read the text below as well, though. The video is here: Web Color Values There are quite a lot of other font styles you can use in your CSS. We'll start with font colours. (Strictly speaking, though, COLOR is not a font style - it can be used just about anywhere to colour lots of different things.): You can have just about any font colour you want for your text (British English users, note the missing "u" after the second "o". The American spelling is used in HTML and CSS). To specify a colour, you can use one of three formats:

    The name of a colour spelled out The name of a colour as a Hexadecimal value The name of a colour as a RGB value

    There is a rather long and exotic list of colour names you can use, things like Cadet Blue, Ghost White, Lemon Chiffon. But you can also use a simple colour name like red or blue. The CSS code is this: H1 { text-align: center; font-family: Courier New, Courier, Mono; color: red; } So you type the word "color" followed by a colon. You then type the name of your colour. There are 17 common colours, and 130 not so common. The common colours you can use are: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. For a full list of all the colour names you can use, see this Wikipedia page:

    Wikipedia - Web Colors


    Hexadecimal values

    Hexadecimal values are used quite a lot in web design. If you've never heard of them before they use the number 0 to 9, and the letters A to F (Base 16). In Base 16, the letters are used instead of the numbers 10, 11, 12, 13, 14 and 15. So A = 10, B=11, C=12, etc. If you want to represent the number 256 in Hexadecimal then it's FF. Three colour values are used, one for Red, one for Green, and one for Blue. Each colour value has two Hexadecimal place-holders. For example, here's the colour Red: #FF0000 Here's the colour Green: #00FF00 And here's the colour Blue: #0000FF So red has two letter F's in the Red position, two zeros in the green position, and two zeros in the blue position. In other words, switch the red value full on, and switch the green and blue values off. Green has two zeros, two F's, then two zeros again. Blue has four zeros then two F's. Black just has 6 zeros, meaning switch Red, Green and Blue off. Note that you need to use the hash/pound symbol ( # ) before the six place-holder values. You can combine the Hexadecimal number and letter values: #2F0B99 Try them out for yourself in your code: H1 { text-align: center; font-family: Courier New, Courier, Mono; color: #2F0B99; }

    Exercise Change the values in the six positions, using the numbers 0 to 9, and the letters A to F. What are the following colours? color: #1BAA12; color: #1087AC; color: #451DE2;

    RGB values

    You can use RGB values in your CSS, if you prefer. (RGB stands for Red, Green, Blue.) Again, place-holders are used for the different colour values. This time, you use the number 0 to 255. You use them like this: color: RGB(255, 0, 0); Note that the number are typed between a pair of round brackets, and are separated by comas.

    Exercise Play around with the RGB values. What are the following colours? color: RGB(0, 255, 0); color: RGB(125, 125, 0); color: RGB(255, 255, 10);

    Instead of experimenting to get the colour you want, an easy way to get the correct Hexadecimal or RGB colour is to type the words "color picker" into a search engine like Google. You'll then have plenty of web sites that give you're the correct values to type simply by playing around with colour sliders.

    ont Size with CSS


    There are plenty of ways to change the font size with CCS.

    You can change the size of your page fonts with the font-size property. The values for the property, however, can be a bit tricky. Take a look at these values for font-size: font-size: 200%; font-size: 32px; font-size: 2em; font-size: xx-large; They are actually the same size! Try them out in your code. Add the following highlighted CSS Style:

    Save your changes and refresh the page in your browser. You should see the paragraph of text change size. Now try the other three sizes: 200%, 32px, and 2em. You should find that they are all the same size (or near enough). Which one you use is up to you. In older browsers, however, using the fixed sizes values of px and em means your users may not be able to increase the size of your fonts. This matters to those whose eyesight may not be perfect, and therefore need a bigger font when reading your text. But browsers allow you to zoom in and out by holding down the CTRL key and pressing + or -. (You reset by pressing CTRL then 0.) So font-size values are not that important. A lot of professionals, though, will set the BODY tag's font-size to 100%, then use em as the value. Like this:

    This means that all the font sizes between the two BODY tags are set to the browser's default size of 100%. In pixels, the default size in browsers is 16px. This is equal to 1em. The P tag above is setting the font-size to one and half times the default, while the class ChangeFontSize is setting the font-size to two times the default. The other sizes are seldom used. But here they are: xx-small x-small small medium large x-large xx-large smaller larger

    Try them out and see what happens.

    In the next part, you'll learn about styling fonts.

    Font Style, Font Weight, Font Variant


    Font-Style

    There are only three font styles to choose from: normal, italic, and oblique. Of course, the default is normal, so you don't have to use font-style unless you want italic or oblique text. You use them like this:

    There's not a great deal of difference between italic and oblique, though. If you want to see the difference, use a sans-serif font, with a large font size.

    Font-Variant

    Font-Variant is used when you want small caps for text:

    And here's what it looks like in a browser:

    Font-Weight

    The weight of a font is how thick it is. There are lots of values you can use here. The most common one is Bold. But you can also have Bolder and Lighter. As well as the named weight you can also use a number from 100 to 900. It's better to stick with round numbers, though, as the difference between 100 and 150 is practically impossible to see. Here's how to use fontweight:

    Add a second paragraph of text between your BODY tags and try it out:

    Here, we've set all paragraph tags to have bold text. Then we've added a Class Selector called Change_Font_Weight, which we've set to lighter. We've then used this class on the second paragraph. Save your work and refresh your browser to see what effect it has.

    Exercise Try some of the number font weights to see how they work. How different is 100 from 900?

    We'll take a break from CSS, now, but come back to it later. In the next section, you'll learn how to insert images into a web page.

    Image Types
    You remember at the start of this course we talked about file extensions, and you learnt what the .html file extension was? You're now going to learn about two new file extensions: JPEG and GIF. Just like web pages and word process documents have file extensions, so too do images have file extensions. There are a wide range of file extensions used for images. The two most popular file extensions used on web pages are JPEG and GIF. (PNG is another popular image format. It's similar to GIF, so we won't discuss it.)

    GIF Images

    GIF stands for Graphics Interchange Format, and was developed by Compuserve. It uses something called a LZW compression algorithm to reduce the size of the file. The size of your images on web pages is a crucial factor for people using slower connections. If you have an image that is 1 megabyte in size, and I only have a 2 megabit connection speed then it's going to take about 4 seconds to load the image on the page. That may not seem a long time, but if my

    speed drops to 500 kilobits per second then it will take 16 seconds to appear. I'm not likely to wait that long for your image to load! So compressing the size of an image makes sense on the internet. If you've taken a photo and then saved it to your computer, take note of the file extension used. The software package you use to view the image will probably give you the opportunity to save the file in another format. Saving the file as a GIF image will greatly reduce the size of the file. There is a down side, however, in converting to a GIF. The number of colours in your image is capped at 256 colours. For realistic photos, this is not nearly enough. And although your file size is greatly reduced so too could be the quality of your image.

    JPEG

    JPEG is the other popular image format used on web pages. It stands for Joint Photographic Experts Group, and allows you to have images with more than 256 colours. In fact, millions more. Again, your original image is compressed when you convert to a JPEG image, so some loss of quality is inevitable. If you want to show off your photos in their best light, converting to JPEG rather than GIF is the best option for the internet. The size of the file might be slightly higher, but then so will the quality. The downside to JPEG images is that jpeg is a Loss Compression format. This means that image quality goes down (rapidly) the more times you compress and uncompress the image. This happens when you save the file over and over again. GIF on the other hand is a Lossless Compression format, meaning there will be no loss of quality when you compress and uncompress the image. Another thing you can't do with JPEG images is have a transparent background. So if your image was this:

    and you wanted to get rid of that black background, you could set the black colour as a transparent colour, if you save as a GIF. With a JPEG, you're stuck with the black background. (You can also animate GIF images, which you can't do with JPEG images.) In general, if your image is less than 256 colours, then save the image as a GIF; if the image is more than 256 colours, and quality is important, then save the image as a JPEG. (Modern digital cameras and mobile phones usually save your pictures in the JPEG format.)

    Inserting images into a web page

    So you have your image file, either a GIF file or a JPEG. How do you get it into a web page? You do so with the IMG tag in HTML. The basic IMG tag looks like this: <IMG SRC="some_image.gif"> There are no closing tags for the IMG tag. So you don't do this: <IMG SRC="some_image.gif"></IMG> In between a pair of angle brackets, you type the letters IMG (short for image, of course). After a space, you type SRC. This stands for Source and means the location of your image. After an equals sign, you type the name of your image between a pair of double quotes. It's essential that you get the SRC part right, though. To do that, you need to know about Absolute versus Relative file referencing.

    Absolute Referencing

    Take a look at this file reference: C:\Users\Owner\Documents\HTML\some_image.gif Starting from the right-hand side, this says that there is an image called some_image.gif. This has been saved into a folder called HTML. The HTML folder is in the Documents folder. The Documents folder is in a folder called Owner. The Owner folder is in a folder called Users, which is on the C drive. This is an Absolute file reference. It points to a specific location on your C drive. This would be no good on the internet, however. Although you will have all these folders on your C drive, somebody else viewing your web page won't. But that person's browser will try to look for all these folders. Of course it won't be able to find them, because all the folders are on your computer, and not theirs. So the image you specified to use in your web page won't be displayed to anybody else but you. Another example of an Absolute References is this: http://www.homeandlearn.co.uk That's an absolute reference to a web page on the internet. Perfectly OK, and you'll see how to add links to web pages later. But Absolute References and not terribly practical when it comes to you own images and your own html pages. Relative References are much better.

    Relative Referencing

    With Relative Referencing, the starting point is not your own computer, but the image file or HTML file itself. With Absolute Referencing, the browser starts the search for the image on the left hand side:

    With Relative Referencing, the browser starts the search for the image on the right hand side:

    So with a Relative reference, the browser starts looking for a file called "some_image.gif". If you just put this: <IMG SRC="some_image.gif"> the browser will look for the file in the same folder where you saved your web page. If it's there, no problem; the browser will display the image. You don't need to add anything else, because the browser will stop searching when the image has been found. In fact, the ONLY place the browser will look is in the same folder where you saved your web page. So with Relative Referencing, if you put all your images and web pages in the same folder, the browser will know where to find everything. And when you're asking the browser to display an image or another web page, you only need the name of the image or web page. You don't need to do this: <IMG SRC=" C:\Users\Owner\Documents\HTML\some_image.gif"> You can just do this: <IMG SRC="some_image.gif"> On a professional level, though, dumping everything into one folder is frowned upon. If you created a folder called "web_site" you would be expected to create other folders inside this one. A folder called "images" to store all your image files; a folder called "scripts" to store any external code; and a few other folders as well. If you do that, Relative Referencing gets a little bit trickier. For example, suppose you have a web page called index.html. You've place this web page inside of a folder called web_site. You've created another folder inside of your web_site folder. You've called this new folder images. So your file and folder structure looks like this:

    Of course, you will have placed all of your images in the images folder. Now, if you want one of those images on the index.html page, you couldn't do this: <IMG SRC="some_image.gif"> If you tried that, the image wouldn't display. That's because you haven't told the browser about that folder called images. You would have to do this: <IMG SRC="images/some_image.gif"> The forward slash means "look for a folder called . . . that is in the same folder as the current file." In this case, look for a folder called "images". (The current file is index.html, which is where you want the image to appear.) If you wanted to point to an image that was outside the "web_site" folder, then life just got even trickier still. (You'll see how to solve this later). But as a beginner, if you keep everything in the same folder - images and web pages - then this sort of relative referencing should work: <IMG SRC="some_image.gif"> In case all this file referencing is not too clear, we'll do some practical work in the next section. (We've produced a video about file referencing, here: File Referencing Video.)

    More on Inserting Images


    In the previous section, you learnt about relative file referencing. In this section, we'll continue the lesson with some practical work.

    Navigate to where on your hard drive you saved your HTML pages. For us, this was a folder called HTML. Inside of the HTML folder, create two more. Call one of the folders images and the other pages. If you're using a Windows computer, your Explorer window will then look like this (Windows 7):

    Double click your template text file and add the following HTML image code:

    Click File > Save As and save your template as a HTML file. But save it in your new pages folder, and call it images.html. Don't forget to change the Save as type box to All Files, if you're using Windows:

    Once you have saved your template as a HTML web page, double click it to open it up in your browser. You should see this, if you are using Firefox:

    If you are using Internet Explorer, however, you should see this:

    In both cases, the image has not displayed. Firefox displays a broken file icon, and Internet Explorer displays a red X icon. The reason is that the browser can't find the file. So if you see either of those icons in future, just remember that the browser is telling you "Image File Not Found". To solve this problem, we have some files for you. The file you need is in the extra_files folder that came with this course. (If you haven't got the extra files yet, the download location is here, under the heading Web Design - New Course : Download the Extra Files needed for this course (You don't need the downloads for the old course.) Double click the extra_files folder, and then double click the york_images folder. Copy the york_minster.jpg file and paste it into your HTML/pages folder. Your pages folder will then look like this:

    The image and the web page are in the same folder, the pages folder. Notice the file size of the image - 747 kilobytes. Could be a bit big on the internet, and we'd want to look into this. Once you've copied the image over, refresh your HTML page in your browser. You should see the image appear:

    If you don't see an image, but still have the "Image File Not Found" icon, make sure the SRC part of the HTML is correct: SRC="york_minster.jpg"

    Note the lowercase spelling, and the two double quote marks. A common error is to spell SRC as SCR. Make sure, too, that the image and the web page are in the same folder. Once you get the image displayed in the browser, create another folder inside the pages folder. Call this one york_images. Your explorer window should then look like this:

    Now move the york_minster.jpg image to the york_images folder. Your explorer window will then look like this:

    Reload your web page in your browser. You should see the "Image Not Found" icon again. Go back to your HTML code and change the IMG line to this: <IMG SRC="york_images/york_minster.jpg"> So we've added the folder name, then a forward slash. This denotes a folder in the same directory as the HTML page. After the forward slash, we have the image name. What we're saying here is, "In the same folder as the images.html page, look for a folder called york_images. In this folder there is an image called york_minster.jpg". Save your work and reload the images.html web page in your browser. You should see the image reappear.
    Advanced file referencing

    Previously, you created an images folder and a pages folder. This:

    For neatness sake, this is a good idea: you can have most of your html pages in the pages folder, and all your pictures in the images folder. (We say most of your html pages because there is an exception called the index.html page. You'll learn about this a bit later.) One difficulty about this approach is that file referencing becomes a lot harder. Suppose we moved the york_images folder inside of the images folder. If we did, the code we wrote before would no longer work. This line: <IMG SRC="york_images/york_minster.jpg">

    That's because there would no longer be a folder called york_images in the same location as the images.html file. The image is now one folder up from the pages folder. The code would therefore be this: <IMG SRC="../images/york_images/york_minster.jpg"> After SRC we now have two dots and a forward slash. Two dots and a forward slash mean "go up one folder from where you are". (Remember, this is all relative to the images.html page, where the code is.) The browser will then look for a folder called images. It will search this folder for one called york_images. Then it will look for the image specified. Don't worry if all that is not too clear: we'll keep images and image folders together, just for simplicity's sake. But if you're still not sure about file referencing, we've produced a video for you here: File Referencing Video.

    In the next lesson, you'll learn about Image Attributes.

    Você também pode gostar