An Authoratative Guide to HTML5 Elements, Attributes, and so Very Much More:
https://www.w3schools.com/tags/default.asp Go to... Inspirational CSS:
http://www.csszengarden.com Go to...
Begin at the Beginning...
Before using this reference, take a moment to understand six important terms: the HTML element, (and the element's possible attribute and its value); along with the three parts of a CSS Rule: the selector, the property, and its value.
THE HTML 'ELEMENT'
<p> ... </p>
opening tag | closing tag
content
The example above, in bold, is an HTML element. Like many HTML elements, it has an opening tag <p> and a closing tag </p>.
HTML elements can be further sub-divided, but don't worry about these just yet. As you progress, these sub-divisions will become more meaningful. They will help hone in your search for that elusive element name you just can't remember. For the moment, just click on the 'HTML Elements (Tags)' and scroll down to find the one you're looking for.
THE CSS RULE
selector {property: value;}
e.g. p { padding: 10px;}
The CSS rule is a little more complex. It has three parts to remember: the selector, property and value:
The selector is often no more than an HTML element (without the angle brackets), as in the p example above;
Copy and paste the following content into a plain text editor (TextEdit for Mac, NotePad for PC, making sure it ends with a .html extension) to create a basic HTML page you can add content to
The 'Full Monty' with Embedded Style Sheet and 'Clearfix' Method.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>...</title>
<style type="text/css">
/* CSS rules here: selector {property: value;} *//* The "Clearfix" Method - Just add class="group" to any
HTML parent element with floated children: */
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
}
</style>
</head>
<body>
</body>
</html>
Linking to an External CSS File
In the root directory, alongside index.html, create a directory/folder and name it 'css'. Within the directory, create a plain text document and name it 'screen.css'. (You can give it any name you like, but make sure it's plain text and ends with a .css extension.
Now we'll add the necessary code in the <head> of the index.html document:
<link rel="stylesheet" href="css/screen.css">
After you've saved both documents, you can begin writing your CSS styles into screen.css. Or, if you've created any embedded CSS styles within the head of index.html, copy and paste them into screen.css, but omit the start and close <style> tag from your selection. When you've successfully done that, remove the content from index.html.
'Lorem ipsum' is dummy text used to quickly and effectively simulate the look of actual page content.
Any internet search will yield many sites offering 'lorem ipsum' generated text, which you can copy and paste directly into your project. Here's one site which, at the time of writing, not only ranked highest on a Google search, but didn't require you to create a Log-in account: www.lipsum,com. It also includes an informed and interesting background and history on 'lorem ipsum'.
If you want a generator on your desktop, there are free downloads available. And for Mac users, there's at least one free Widget you can download from the Apple Store—I know, because I downloaded it. If you're using Sublime Text, generating 'lorem ipsum' is easy: just type in 'lorem'—without the apostophes—and press Tab. If you want some 'Lorum ipsum' right now, here's paragraph I've just generated in Sublime Text:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
HTML (& CSS) Comments.
Add an HTML Comment
I'm always forgetting these bloody things, and they're so indispensable, too! Whenever you want to comments, section headings, explanations—anything you like—into into your HTML, but you don't want it to be visible enclose it between the following, just like this:
There you go: you can't see a thing in the browser, can you? But here's what's written. It's visible now because I've converted the 'less than' and 'greater than' angle brackets into character entities thus rendering the HTML invalid.
<!-- Write anything you like here. -->
Add a CSS Comment
You can add similar invisible comments into your CSS documents using the following:
/* Write anything you like here. */
So, you may be wondering, how come it can be seen? Because, this is an HTML document, Silly!
Quick Reference Table for Image and Object Elements
Placing an Image
The img Element
Here is the bare-bones image element <img>. Notice it doesn't have a closing tag, between which we could, if we chose, write some content for the browser to display. In fact, the img element is called an 'empty' or 'replaced' element because it never contains content of its own. Instead, we place within it an attribute (and an attribute value, always a url) which then 'sources' (and is replaced by) the actual content. Below is the img element with the src attribute and value.
<a src="url">
All we need do now is replace the url value with an actual, real value. As we discovered in 'Links', urls come in different guises: relative; root relative; and absolute. I'm a tad short of 'decent' images on my computer, so for demonstration purpose only, I'll use an absolute url.
(I always wondered why http: was followed by two dashes, //. It took a while to figure how to nick one of your images, and just by chance I wondered if a double-dash might work. It did. Hooray!)
To complete the img element, and make it standards-compliant, we are required to include the alt="text" ('alternative') attribute. This should be a short description of the image. If for some reason the browser cannot find the image—the user may be using a text-only or speech browser device—
<img src="url" alt="text">
By the way, we don't have to give the alt attribute a value for us to remain compliant with the standards. There will be circumstances when it is best not to give a value. For example, if the image is too small to fit in the alternative text, the browser won't bother. In such circumstances it's best not to uselessly bloat the download file. All we need do is include the alt attribute, but omit any value:
<img src="url" alt="">
(Jennifer Niederst gives, as an example of when not to include an alt value an image whose alt text would be "red line", because it's not at all useful, and only slows down the document processing. She also points out, that users with spoken browsering devises would find it frustrating. In such case, include the two double-quotes, but don't include a value, as in the example above.
The Width and Height Attributes
The width andheight, although not required, may be useful, especially if you have alote of images, or the images are large. With these measurements, the browser can layout the page while the images download. Without them, the browser must reconfigure the page as each file is downloaded.
Here's how to include the width and height attributes (and, by the way, if you're not sure what the measurements are, just drag and drop the image file into a browser window—they will appear in the browser's title bar):
1. Always reuse the same image, rather than have multiple copies of the same image. A root relative url can achieve this.
2. For large images, place a small preview-sized image, with description, dimensions and file size. Let the user decide if they want to wait for the download.
Images Placed in a Flow of Text
Images Used as Links
Image Maps
Relative Linking Conventions for src and href Attributes
Examples
The following image placed with the <img> element.
Nutshell, pgs 634-637, Portable Document Format (PDF)
Linking to a PDF - Step-by-Step Guide
The .pdf will open, either in the present window (replacing all your content); or in a seperate window. If you want it to open in a seperate window, include the target attribute in your <a href="url">...</a> like this,
<a href="url" target="name">...</a>
Type in the following markup.
<a href="images/bass-sunny-afternoon.pdf" target="display">Bass Part for Sunny Afternoon</a>
In a previous Step-by-Step, we used the anchor a element, along with its href attribute, to create a link to a PDF document. We then used the target attribute to open it in a seperate window. Here, we'll go through the steps necessary to embed a PDF within the content of the page we're actually working on. And for this we'll need the object element.
In the table above, along with the Core attributes, are the three, or possibly four, attributes needed to accomplish this. The height and width are self-explanatory, so we'll concentrate on the other two. But before we begin, make sure you have a PDF document ready, with the necessary .pdf suffix.
Begin by typing in the object opening and closing tags. These can be included either inside or outside a paragraph element. It makes little difference. I'm typing them within.
<object></object>
The data attribute provides the url of the PDF document, whilst the the type attribute specifies the kind of media file being used. (By the way, the W3Schools suggests that only one—either one!—of these attributes needs to be included. But if only one is required, that one must surely be the data because otherwise there'd be no url provided.) So let's now add that to our code. I'm linking to the sunny-afternoon.pdf, which resides in my 'images' directory. You must put in the correct url link to your PDF file.
When we Save and Refresh, you should see something like this on your screen:
If you don't, then maybe your browser requires the type attribute? We're going to add that next, anyway—even though, according to W3Schools, it may not be strictly necessary.
Within the code, enter the type attribute, and its value, just as it's written below. I'm going to place it all in front of the previous entry—however (please note) not because this is the required order of entry. It isn't. Any order will do.
If you still cannot see the the PDF, and you're absolutely sure your code is right, consult the sidebar, "For Even Older Browsers" for some additional coding solutions.
Let's now include the width and height. All of the sources I consulted said these had to be entered as pixels. However, whilst I found this to be true of the height value, I found the width also responded perfectly well to percentage values. Of course, that may just be browser (Safari) specific, but I'm going to include a percentage value here, just to show it can be done. If it doesn't work for your browser, just convert to pixels.
All of this Step-by-Step guide has been contained within a div tag with a width-value of 900px. Further, all of the markup is included within to p element. It didn't need to be. Within that p element, I'll complete the code:
After a Save and Refresh, you should now have a PDF happily embedded within your document content, comfortably taking up all of the available width of your containing vessel, like this (if it is within your p tag—and please scroll down to the text beyond):
Or, like this, if is not—again, please scroll down to the text beyond:
Try experimenting with percentage values beyond 100%, or beyond the pixel dimensions of your containing vessel. It's really quite interesting! I'll explore them more, here, later.
The table above is just quick reminder of all ten HTML elements available for use in building tables. Only the first three are essential, but you'll almost certainly wish to include the fourth element, the Table Header. A comprehensive list of all these Elements, and their corresponding Attributes and Values, is in preparation. Please scroll down and take a peek at the progress made so far.
The table, below, lists all of the HTML elements associated with the table element, and their attributes and attribute values. It doesn't set out to explain them, just list them -- I haven't a clue what most of them do, myself!
Above the list is a 'Mini Menu'. Use it to locate the element you're looking for. It will jump to it. Within each HTML Element group is a return to the 'Mini Menu' or a return to 'Top'. I hope they're self-explanatory. If they're not, and you end somewhere you didn't expect, hit the Browser's "back" button.
Nutshell: pgs. 641-683, Appendix A. Condensed but comprehensive summary of HTML elements, arranged alphabetically, with explanations & examples.
Learning: Chpt. 5, Marking Up Text, pgs. 71-94; HTML elements at a glance, pg. 94.
HTML Elements (Alphabetical)
References:
Nutshell: pgs. 641-683, Appendix A. Condensed but comprehensive summary of HTML Elements arranged, as here, alphabetically, with explanations & examples.
Internet:Index DOT Html: The Advanced HTML (and CSS) Reference. This is a very comprehensive list of HTML Elements and Attributes. There is a similarly comprehensive list of CSS Selectors, Properies and Values. Its only downside is its age, 2003 being the last update.
And here is the above anchor in action. It will open a new window or tab: MusicTutors.
Surely the 'attribute' of an HTML element must, like the CSS rule, have a 'property' and a 'value'? The 'href' attribute to an anchor tag doesn't stand alone. It also requires a 'value':
_______attribute________
| |
<a href="www.musictutors.net">Music Tutors</a>
| |
property value
RGB: rgb(r, g, b) [examples:
rgb(0, 0, 0) (black) or rgb(255, 255, 255) (white)
rgb(0%, 0%, 0%) (black) or rgb(100%, 100%, 100%) (white)
rgb(hex. values) see above]
RGBA: rgba(r, g, b, a) [where a (transparency) = .01 to 1]
(It would be interesting to see if .01 was the most transparency we could achieve. What if we used .001 or beyond?) (And what is Safari's support like for the 140 keywords for color? The last comment was in Coral. This is in Darkseagreen)
font
✓
Shorthand: font-style, -variant, -weight, line-height, [optional and in any order, followed by (mandatory, and in this order)] font-size, generic
The generic families: serif, sans-serif, monospace, cursive, fantasy
line-height follows font-size and slash, thus: font-size/line-height
Multiple insertions of the text cursor to type/edit in different places simultaneously:
Mac: cmd + click (at each location)
PC: ctrl + click
Multiple Edits of Same Word
Edit same word in multiple locations - highlight word - ST outlines all other instances - then
Mac: cmd + d
PC: ctrl + d
selects following instance each time. To skip an instance, simply hold down cmd and select instances beyond, then continue with + d.
Click-Dragging Cursor Up/Down
To place cursor at the same location (e.g. beginning of a list) over several lines:
Mac: alt + click drag (up/down)
PC: shift + click drag
Placing Cursor at Uneven Line Ends
Place cursor at the end of several uneven lines - the previous, but with cursor dragged up/down at extreme right of any line ending
But BETTER WAY! - select all of the text, then,
Mac: cmd + shift + L
PC: ctrl + shift + L
This makes each line an editable line - then, to place cursor at the end of each line,
Mac: click left arrow
PC: click left arrow
Moving Cursor to Beginning/End of Multiple Lines
With multiply cursors still in place, to move to the beginning of each line, and then return back to the end,
Mac: cmd + left/right arrow
PC: ctrl + 'Home' (and presumable 'End')
Adding HTML Opening and End Tags
Adding opening and closing HTML tags to content - highlight the content, then press,
Mac: cntl + shift + W
PC: alt + shift + W
This automatically wraps the content in a default <p>...</p> - type in the desired HTML element. What you type automatically becomes both start and end tags.
Adding HTML Start/End to Individual Items in a List
To add the start and end tags to each item in a long list of items, select all the items in the list. Simply repeating the previous instruction would only add a start and end tag to the entire selection. To add a start and end tag to each individual item, use the previous
Mac: ctrl + shift = L
PC: alt + shift + L
making each line editable, then,
Mac: ctrl + shift + W
PC: alt + shift + W
The bass guitar tab, below, uses only the <h4>...</h4> and <pre>...</pre> (pre-formatted) HTML elements to display all of the TAB -- previously created in TextEdit:
ALL MY LOVING (BASS GUITAR)
A B A B C D A B C E
[A](Verse)
F#m B E C#m
||:------------|------------|------------|------------|
|4--2--1-----|------------|------------|------------|
|---------4--|2--0--------|------2-----|4--4-----4--|
|------------|------4--2--|0--4-----4--|------4-----|
1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4
A F#m D B7
|------------|------------|------------|------------|
|---------2--|4--4-----4--|0--0--0--0--|------------|
|0--0--4-----|------4-----|------------|2--2--2--2--|
|------------|------------|------------|------------|
1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4
[B](Verse Refrain)
F#m B E C#m
|------------|------------|------------|------------|
|4--2--1-----|------------|------------|------------|
|---------4--|2--0--------|------2-----|4--4-----4--|
|------------|------4--2--|0--4-----4--|------4-----|
1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4
A B E (3x to Bridge)
|------------|------------|------------|------------:||
|---------2--|------4-----|2-----------|------------:||
|0--0--4-----|2--2-----2--|---4--2-----|------------:||
|------------|------------|---------4--|0-----------:||
1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4
[C]Bridge
C#m C#maj7/C(B#) E
|------------|------------|------------|------------|
|------------|------------|2--2--------|2--2-----2--|
|4--4--------|3--3-----3--|------2--2--|------2-----|
|------4--4--|------4-----|------------|------------|
1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4
C#m C#maj7/C(B#) E (2x to Coda)
|------------|------------|------------|------------||
|------------|------------|2-(2)-------(2--2)---(2)-||
|4--4--------|3--3-----3--|---4--2-(2)-|-----(2)----||
|------4--4--|------4-----|---------4--|0-----------||
1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4
ALL MY LOVING (BASS GUITAR) Page 2
[D]Guitar Break
A E
|------------|2-----------|------------|------------|
|------2--4--|---4--2-----|2-----------|------------|
|0--4--------|---------4--|---4--2-----|------2--4--|
|------------|------------|---------4--|0--4--------|
1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4
F#m B7 E (Back to Verse)
|------------|------------|------------|------------||
|4--2--1-----|------------|2-----------|------------||
|---------4--|2--0--------|---4--2-----|------------||
|------------|------4--2--|---------4--|0-----------||
1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4
[E]Coda
C#m E
|------------|------------|------------|------------|
|------------|------------|2--2--------|2--2-----2--|
|4--4--------|4--4-----4--|------2--2--|------2-----|
|------4--4--|------4-----|------------|------------|
1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4
C#m E
|------------|------------|------------|------------||
|------------|------------|2--2--------|------------||
|4--4--------|4--4--------|------2--2--|------------||
|------4--4--|------4--4--|------------|0-----------||
1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4
The browser's own default style sheet will render it like this:
Title
List item
List item
Using CSS, we can override the browser's default style sheet and begin creating our own. For example, I think it looks a little odd for the Title to be styled with a bullet, along with the List Items, as if it were an actual List Item. It's not. It's a title. And I'd like it to look a little more like how a proper title should look, and that's what we'll be doing in this tutorial.
So let's begin by removing this inappropriate Title bullet. We can do that easily with the list-style-type property. One of its values, none, allows us to turn off bullets. (It also allows us to choose different kinds of bullets, or even add our own custom image to use as a bullet, if we want.) But for now, we just want to remove the bullet.
Add the following 'in line' code into the markup you copied earlier:
Good! The bullet's now gone. But perhaps you'll agree, it might look even better if 'Title' didn't appear to share the same indented look as the other 'List Items'? We can "un-indent" the Title with the following CSS property, list-style-position and giving it a value of inside. I'll expain what's happening in a moment. For now, keep the previous code, and just type in the following. When you're done, Save and Refresh.
That looks much better, doesn't it? We could almost leave it at that. But we'll go on to add even more styling shortly.
First of all, let's go back a moment. Previously, I suggested we "un-indent" the Title; but if we look carefully at the list now, and compare it with the previous one, we'll notice the Title hasn't shifted at all. It's in exactly the same position now as it was before. What has shifted is the position of the List Items and bullets. They've moved further to the right. Fascists, or what?
Actually, the Title and List Items were in their own little text block, with the bullets sitting outside that block—just like hanging indents. When we gave the list-style-position the value of inside we really replaced the browser's default value of outside.
(If you'd like to test it out, go back and replace the inside value with outside. Try it a few times—don't forget to Save and Refresh each time. When you're done, return the value to inside.)
Let's move on and add a bit more styling. I think it would look better if the whole block sat flush against the left page margin. We can achieve this by removing all the default margin-left or padding-left properties the browser adds on. Type in the following:
In the browser, it should now look like this, flush against the left margin:
Title
List item
List item
Again, we could leave it just as it is. But we often want our Titles to really stand out and catch the eye. A simple, and effective way to do that is to make it bold. We could do that by simply styling it 'bold'. But Titles are important — and 'bold' merely catches the eye. Let's use, instead, the semantically rich <strong>...</strong> HTML element instead. This adds semantic weight to the title (which Search Engines pick up on). Now we just need to wrap 'Title' in it:
It will look exactly like the first example shown above. That's the browser's default style sheet at work. We need to override it by adding a style sheet of our own. Let's begin. Type the following CSS code into the markup text you've just copied, taking care to place it within the Title's opening tag, and including the two spaces:
It should now look like this in the browser (if it doesn't, check your typing!):
Title
List item
List item
Notice the bullet has been removed from the Title. This is much more in keeping with its role as a Title, not a List item.
Now we'll take the List item bullets—which by default are placed outside the text block—and place them inside. Enter the following new code (in bold) into the markup:
Notice the bullets are now sitting directly beneath the Title. It looks a lot better. But the list is still indented. In our finished example, above, we had it flush against the left margin of the page. To achieve this, type the following into the markup:
...we can see it is now flush against the left margin. Good! We could, of course, leave things exactly as they are now—but let's go a little further and make the Title really stand out. We can do this by placing it within the HTML <strong>...</strong> element. Let's now add it to the markup:
The four steps given above very clearly give a demonstration of how width, default padding, and bullets inside and outside work.
Block Level Styling—The Unordered List
Block level elements—such as <h1>,<p> and <ul>—can be styled directly and don't need to be wrapped in a <div>...</div> to achieve this. If the element being styled is unique to that page—for instance, the site's navigation menu—consider simply just using an id attribute within the element's opening tag, <ulid="unique-nav">, rather than wrapping it in a <div>. This makes for smaller download files. If, however, the element being styled is intended for repeated use, place a class attribute within its tag: e.g. <ul class="generic-nav">.
Although the styling methods used in this tutorial are applied to an Unordered List, the same, or similar, methods can be applied to any other block level element. Actually, to reinforce that last point, the Unordered List is itself a combination of two elements. The first is the parent element, the 'unordered list', or <ul>...</ul> The second element, wrapped within the parent element, is the 'list item', or <li>...</li>. It looks like this:
The first thing we'll do is give it a background color.
Applying a Background Color to the List
To add a green background to the list we need to create a CSS rule. The simplest CSS rule consists of a property and a value, which are then placed within the HTML document using the style attribute. The syntax bonding them into a CSS rule is important. First we need to embed the style
In our case, the property we require is background-color which is given the value of green. Using the inline style attribute, we place these in the opening <ul> tag of the list like this:
Now that we've given the list a background color we can see how block level elements work - they take up the entire available horizontal space. We don't often realise this - but now we do, and recognise it's not what we want, let's constrain it - but before we do, I want to explore something rather interesting.
Here's something might be worth noting: the presentation of rules in a CSS stylesheet, like the presentation above, is entirely a matter of choice. The fact is, CSS ignores all spaces and line breaks. So the rules above could have been presented on single lines, as shown below. That's how they'll be presented here for the rest of the tutorial.
ul {width: 200px; background-color: green;}li {background-color: lime;}
Note: The three books I'm reading, and Brad's Udemy course, take us through all of the above (and most of the next section, 'Basic') before introducing CSS. I think this may be a mistake. My opinion is turning to the idea that some very basic CSS styling options ought to be included, right now, and right here.
Basic
Document Structure
HTML Elements
!DOCTYPE head title body
Document Structure
header article aside footer nav div
Text Elements
Block Level
h1-6 p hr ul li ol dt dd br
Inline
em strong q blockquote pre span
Links
HTML Elements
<a href="url">...</a> / ../ http:// #name
Absolute URLs
Relative URLs
Site Root Relative URLs
<a href="/guitar/chords.html"Guitar Chords</a>
To Document Fragment
Name Fragment: id or name attribute
Link to Fragment: <a href="#name">...</a>
Open New Browser Window
target="_blank"
target="display"
With JavaScript
Mail To
<a href="mailto:name@address">...</a>
Images & Objects
HTML
Simple Image
Link
Imagemap
Elements: <img src="url">...</a>
Attributes: src alt longdesc width height usemap map area
Specifies the initial placement of the repeating or non-repeating background image.
background-position
left | center | right || top | center | bottom
Percent and number (+ and - values allowed)
• Keywords: match any horizontal keyword (left of double line) to vertical keyword (to the right of double line). "left top", "right bottom", or "center center".
• Values given in space-separated pairs (horizontal, then vertical).
• Any value mixed with any other.
background-repeat
repeat | no-repeat | repeat-x | repeat-y
background-size
contain | cover
Positioning background-image with Percentage Values.
If you've ever tried percentage values to place an image with the background-position property, you may have been left somewhat perplexed. I certainly was. However, once you understand how it works, you'll probably think—as I did—"Ha! That's really rather clever." Here's how it works.
When you give a percentage value for the x and y coordinates—let's say both coordinates are given the value of 50%—the browser calculates where these coordinates meet within the containing box. At the same time (and this is the clever bit) it also calculates where these same coordinates meet within the imported image box. The browser then matches the two meeting points together, and that's where the image is placed within the container.
Let's see that in action. In the figure below, the larger box (representing the container box) begins, top left, at 0%, The x and y coordinates are then divided at 25%, 50%, 75%. At 100% they meet at the bottom right corner of the box.
In our example, above, we gave the x and y coordinates as 50% 50%. That gives us a point within the containing box right at the center. The browser also applied those coordinates to the imported image box (our yellow box, below) which was its center. The two points located, the browser matches them together at the center of both.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Incididunt ut Labore et Dolore
Incididunt ut Labore et Dolore Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Incididunt ut Labore et Dolore>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
The box below represents any area of a web page, however large (it could be the entire screen) or small, into which we wish to add the adjacent star graphic as a background image.
But first of all, just so we can see more clearly what happens next, let's add a simple grid to our web page area.
Background images are placed using the CSS declaration: background-image: url(url);. By default, the browser will first place the image in the top left corner—in our grid, the top left box—of the web page area; then the browser will duplicate (or tile) the image horizontally and vertically, until the entire available space is filled.
In our example, with the grid boxes and star graphic equally sized, this will result in the following neat arrangement of page area and image size,
But suppose the page area had been a little larger, or smaller. What would happen then? The browser would still tile the image across and down, starting from the top-left corner, until it had filled all the available space. However, when it reached the right and bottom border, if there were not sufficient space to render the complete image, the browser would simply, and brutally, have crop it, as can be seen below.
As we'll see, there are numerous ways to over-ride this default, using cousins of the background-image property.
The background-repeat property has four well-supported keyword values: repeat, no-repeat, repeat-x, and repeat-y; and two, as yet, poorly-supported values: round, and space. Here's an At-a-Glance:
Note: If only one value is entered, the browser will treat it as the 'x' (horizontal) coordinate; by default, the value of the missing 'y' (vertical) coordinate will be 'center'.
Then slowly scroll down and examine what happens as the background image emerges from beneath the banner.
You're right. It is magic!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Links
Root Relative Links
The following photo, groupphoto.png,
lives in the 'images' directory, which is inside the root directory—along with index.html—right at the very top of the musictutors.net website.
This present document, however, lives in the 'html_css_reference' directory, which in turn lives in the 'hidden' directory which, in its turn, lives in the root directory, along side the 'images' and index.html. Although not impossibly fiendish, working out the url is still a challange to the old grey matter. But let's go through it.
From the present 'html-css-reference' directory, we move back up one step to the 'hidden' directory (that's one '../'). From there we go back to the root directory (that's another '../'). We're in a position to step down into the 'images' folder and retrieve the 'groupphoto.png' and place it here, in this document. Here's the url:
<img src="../../images/groupphoto.png" alt="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Logo Banner