Notes for Codefellows Code 401 301 201 and 102
# Duckett HTML book:
images are subject to copyright. There are stock images you can use that are royalty free, though they often are overlayed with a watermark of the company that owns and distributes them.
You can link images directly from the internet. Or create a folder within the directory that also contains your HTML, CSS, etc. A simple “images” folder that you can store images within. This will help you with planning out your website too, as you can collect all the images you’ll need beforehand and have them stored internally instead of having to track down URLs.
<img src="ImageURL.com" alt="text to be displayed or read to the user if the image is unable to be displayed or seen" title="additional info displayed to the user when image is hovered over" />
<img src="images/me.jpg" width="500" height="500">
This example demonstrates both the internal pathing to pull an image from the folder you would ostensibly create for your own images. Also demonstrated are the height and width elements which as you could guess, control the height and width of the image when the website loads.
<img src="http:///www."> tag does not need a closing tag.
You can place the box of the image element within the box of another element. Taking <p> paragraphs for example…
Inserting the image tag before the paragraph will insert the image in a block above the text block - because img tags are INLINE - so you either CSS grab and convert them to block or place them inside of a div.
When selecting images from the internet to save to your folder be careful to save them with the most efficient format. JPEG images are better for those with rich and varied color, while GIF and PNG are better for images with very simple color schemes.
6 main ways of value definition for color/background-color property:
color names : coral, white, black,…
background-color or just background
color for text
Typeface Description Font example Serif extra detail on the primary strokes of letters Georgia, Times, Times New Roman Sans-Serif low-res and with straight strokes Arial, Verdana, Helvetica Monosapce Each letter has the same width Courier, Courier New Cursive Joining strokes or other stylistic similarities to cursive, Monotype Corsiva
To specify your desired typeface in CSS…
p {font-family: Arial, Times, Comic; font-size: 10px;}
Specifying a list of fonts in this manner acts as a failsafe. Meaning if the browser loading the page does not possess the first font it will use the next in line and so forth. font size is self explanatory, and can be changed by determining pixel size (12px;), Percentages (127%;),EMS (1,3em;) in which a single “EM” is the letter ‘m’ and scales text from there.
Other Formatting CSS Description
p.intro:first-letter { font-size: 200%} Makes the first letter in a block of text the specified size p.intro:first-line {font-size: 120%} Makes the first line in a block of text the specified size :visited {color: red} Automatically makes a visited link turn the specified color :hover {background-color: red} Specified color is applied when user hovers over the element :active{background-color: green} Specified color is applied when the user “activates” an element like a button :focus{color: blue} Applies specified color to an element you want to draw focus to like an interactable element you don’t want the user to miss