HTML

If you want to creat a link but you don't know hwere you want it to go yet you can ruse a ____ in place of the address.

#

External CSS is is better than internal because you can edit multiple files at one time. To use external CSS create a new file with the .css extension. Then link the files you would like to control to it within the head uses the link element (not the a)

.

Radio buttons are used for singular selections. check boxes are used for multiple selections. Radio buttons are associated to one another by the name attribute. if the radio buttons are not associated than you will be permitted to select multiple.

.

Text area creates a box for text. cols stands for collumns.

.

Typing "a" will bring up the href attribute which is used to creat links you can add the target="_blank" comand to this to have the link open a new tab rather than changing the one you are currently on. Just blank without the underscore also works. links are displayed with an underline by default; to remove it... a{ font-size: 40px; text-decoration: none; }

.

a p aka paragraph elemnt could be used to label an input box but it would have the same affect when clicking it as the actual lable element

.

a single element may contain both an id and a class

.

css also has the option of using various id as a selectors

.

the .html extension should be added to all of the html files that you use to write code

.

when assigning IDs you should insure they are unique.

.

The internal style sheet has more power than the external. meaning if there is a contradiction between the two than the internal will have the final say. And inline overrides them both.

. This heirarchy allows for allows for more variation and control.

div can be used to edit everything between the start of one elemnt asnd the end of another

. used for grouping and blocking

span can be used to edit part of a single element without the rest

. used for inline

closing tags are proceded by _____

/

css entries are called rules. Bellow is an example of a rule h1 { color: blue; font-size: 4rem; } the h1 is called the selector. If it was h2 than h2 would be the selector. Color is the property. Blue is the value. The curly bracket and the contents within are called the declartation block. the combination of a property and value is called a declartion.

/* css rule*/ /* selectors */ /* declaration block */ /* declaration */ /* property */ /* value */

How many heading types are there?

6 (h1-h6) as you increase the number the font size decreases. h1 should be used at most once on a single form. headings are presented on their own line. automatically bolded. You shouldn't an h3 without an h2 because the number is used to indicate what level of text is being used.

Adding comments is a good idea to help keep everything orgnanized and recognizable. comments are not shown on the webpage.

<!-- Comment 12/22/21 --> shortcut to create comment ctrl + /

Tags are inclosed in

<____>

anchor tag <a> creates a hyperlink to go to another webpage, email address, file, or location on the same page.

<a href="https://www.udemy.com/"> <img src="Images/laptop.jpg" width=200 alt=""> </a>

A button attribute such as submit can be added to forms

<form action="" method=""> <input type="text" name="name" id=""> <button type="submit">submit</button> </form> <br> can be added to change the placement of the button you can add an additional input attribute and put submit as the type rather than text rather than adding a submit button youi c

Form elements are documents with interactive controls used to submit information. The action attribute determines where the information is sent. The method attribute determines which http method should be used (get and post are common). The post method adds information to the server. Get retrieves info from the server. The name attribute is used when you will be collecting the data. The id attribute labels the input box. You may also assign label elements if you want more than one box in the same form. An id shouldn't start with a numeric value. There are 20+ possible types of input. input doesn't contain a closing tag. type is the most important attribute for the input element. one possible input type is number. The number input type doesn't allow letters to be typed in it, has up and down arrows that can be used and you can add a min and max. You can also add step to a number input. Of course, you can have buttons and stuff like that in a form too.

<form action="" method=""> <input type="text" name="name" id=""> </form>

to change the color of text

<h1 style="color:olive"></h1>hello world</h1> The above would change the "hello world" text from black to olive. this would be done in the body and is the inline method

sub and sup are commands that can be used to lower and raise text in comparison to the surrounding text.

<h1>Hello I'm ^1st john _{in town} </h1>

Rather than slecting all of one type of element by using an element selctor; or only one individual element with an id; you can use class directors. You assign the desired elements to the class and then create a single entry in the .css file to modify everything that is in the specified class.

<h3 class="green">I'm green</h3> <h3 class="green">I'm green</h3> <h3 class="red">I'm red</h3> <h3 class="red">I'm red</h3> .green{ color: green; } .red{ color: red;background-color: gray; }

height and width attributes can be added to images. if you only adjust one of the two it will automatically change the other to keep it proportional.

<img src="./HTML Practice.JPG" width="260" alt="practice image"> You can specify what percentage of the screen you want the image to use rather than specifying the pixels. <img src="./Images/Background.jpeg" width="100%" alt="Coffee Beans"> it is best practice to specify the size of an image using CSS rather than adding it to the html. The name of the image may mess it up. When I tried to use an image that I had saved as sunset#2 the alt was displayed on the page rather than the src. I changed the name to sunsettwo and it worked properly.

This way of making a checked boxes makes it start out checked. it can be unchecked but that is not the default when it is writen this way. (The extra "checked" after type does this)

<input type="checkbox" checked name="programming" id="" value="javascript">javascript

password can be chosen at the input type. This would implement masking. a placeholder can be used to place text into the the input box like how we see "password" displayed inside the password boxes before we click on them

<input type="password" placeholder="password" >

Javascript adds a the word Javascript to the right of the radio button in example one and to the left of the radio button in example 2. the br is included just to show the that I copied all of the text. The word javascript isn't inclosed in anything.

<input type="radio" name="">Javascript <br> Javascript<input type="radio" name=""> <br>

the label element can be listed under the form element and may contain a for attribute where you would input the id of what you want to label, followed by the label you would like to assign.

<label for="name">first name</label> <input type="text" name="name" id="name"> if you click on the label on the webpage than it wil heighlight the text box and present the flashing typing bar

To create a dropdown menu aka drop box use a select element and option elements with the value option. You can preselect and option using the selected attribute on one of the options. options are nested inside of the select.

<select name="languages" id=""> <option value="javascript">javascript</option> <option value="java">java</option> <option value="python">python</option> </select>

tr creates table rows. td is used to input table data. th is used for the table header. Table headers are bolded.

<table> <tr> <th>some info</th> <th>some info</th> <th>some info</th> </tr> <tr> <td>john</td> <td>peter</td> <td>sara</td> </tr> </table>

unordered lists (ul) and ordered lists (ol) can be combined. The following is an example of a nested list.

<ul> <li>john</li> <li>peter <ol> <li>html</li> <li>css</li> </ol> <li>sara</li> </ul> in this example john, peter, and sara would have bullet and then under peter and inset would be the number 1 followed by html and the number 2 followed by css. li stands for list item

CSS

Cascading Style Sheet. HTML is what is displayed and CSS is how it is displayed.

text editors help correct formatting errors automatically

I'm using prettier code formatting.

external resources resource

MDN - Mozilla developer network. very extensive. html w3schools - more user friendly for beginners than the above. but not recomeded as highly as MDN MDN has list of all css properties. google text shadow css generator

Within the starting head tag and the closing head tag you can add style and input CSS for the internal method.

The internal method is better than inline because you can make multiple changes at one time like changing all of the h1 one text within a file to a different color or font size rather than chaniging each h1 individually. And it's eaier to read your code because the CSS isn't mixed into the HTML body and clogging it up.

<form action="/birds"> <input type="checkbox" name="agree_tos" id="agree" checked> <label for="agree">I agree to everything</label> </form>

This entry creates a checkbox that starts out as checked with the words "I agree to everything" next to it. if you click the label (words) it acts the same as if you were to click the box.

Things to keep in mind when developing

accessibility - making the website accessible to all users. This is why the alt attribute exist. comments help keep the code organized in a way that you can find things easily.

src and alt are

attributes

strong and b can both be used to

bolds the words contained within. We would typically like to use CSS rather than HTLM to make this kind of edit because CSS is suposed to be used fr style and HTML is supposed to be used for structure. The raeson this has an oprion on HTML is because if someone is using a screen reader it will be presented differently so it serves a functional purpose as well as style.

<br>

break, inserts an empty line or empty space for a partially filled line. no closing tag

It's imortant to insure that the images you use for comercial purposes don't have

copy rights. Free images found at pixabay, pexels (has videos as well as images), and gratisography (funny images)

<h1>copyright &copy; </h1>

copyright © You can google html special characters to found the format for lots of other. special characters start with an & sign followed by the name or number of the sign you want to insert followed by a semicolon.

What is the shortcut for saving the file on Visual Studio code?

ctrl + s

the id attribute is used for the label

element

em

emphasises the text conatined within. We would typically like to use CSS rather than HTLM to make this kind of edit because CSS is suposed to be used fr style and HTML is supposed to be used for structure. The raeson this has an oprion on HTML is because if someone is using a screen reader it will be presented differently so it serves a functional purpose as well as style.

More than one element can be selected at a time

h1, h2 { color: blue; } alternative format h1,h2 { color: blue; }

The homepage file should be labeled __________

index.html

3 main ways to use CSS

inline, internal, and external

If you use the height and width attributes than the display is changed but the browser still processes the originally size which can slow things down. So if you're going to use a lot of large images crop first. To avoid this you can use an app such as photoshop to change the size of the image and save it before using it. You can also right click the image in your folder and open it with snip to crop

it

Coresponding opening and closing tags shouls be placed withing the same element.

like a symetric sandwhich

lorem is a command that adds random words

lorem can be followed by a number and no spaces to specify the number of desired words. Some numbers don't work.

email, password, type, name, id, value, radio button, checkbox, and placeholder are some attributes that can be used with the input element.

name and id are mainly used if you plan on doing something with javascript or using a label. value is used to specify what's being sent for the server (it will be displayed in the address bar when the associated box, radio, etc. is selected on the webpage.

<ol> <li>john</li> <li>peter</li> <li>sara</li> </ol>

ol - ordreed list presents the bellow text with each name proceeded by a number. john peter sara

html uses ________ tags and _______ tags

opening tags and closing tags

For a list of keyboard shortcuts - help -> keyboard shortcut references

option is mac's version of alt command is mac's version of control alt + click adds additional cursors so you can type on more than one line at a time. ctrl + k ctrl + r open keyboard shortcuts. ctrl + l selects the current line ctrl + x - cuts the entire line or what is highlighted. end moves the cursor to the end of the line. home moves the cursor to the beginning of the line ctrl + <-/-> moves cursor left or right by word ctrl + end goes to bottom/end on document ctrl +home goes the top of the document ctrl + d selects all of the text in the document that match the word or phrase highlighted shift+alt + down arrow creates a duplicate of the line you are currently on. alt + up or down arrow moves the current line up or down ctrl + / creates a comment ctrl + enter starts a new line

_____ is the elment used for paragraphs

p

images don't use closing tags

see bellow

CSS syntax

selector{:property:value;property:value} semicolen is used to separate declarations. property may include font size, color, width, etc..

html is white space collapsing

so if you double space or something it only shows up as a single space on the website.

You can create tables with html using the

table element

html is made up of _________

tags + attributes = Elements

the value attribute is used when hard coding.

the value atribute could be used in place of a placeholder but would show up at normal text that would need to be manually deleted before inputing other material.

<ul> <li> <a href="#">home</a> </li> <li> <a href="#">about</a> </li> <li> <a href="#">contact</a> </li> </ul>

this an example of the above being used for links instead of normal text.

<ul> <li>john</li> <li>kate</li> <li>josh</li> </ul>

ul - unordered list li - list this combo creates what you see bellow with the addition of bullet points proceeding each name. john kate josh ul list are mostly used with links rather than names and are used for navigation. The bullet points can be repleced with stuff like roman numerals or squares by using the list-style-type attribute. You can also specify none to remove any representation of bullet points. and you can change specific items on the list or the entire list. The folowing format would be used to specify only the li elments withing the ul ul li a { bla blah blah } The following would aply all elements in the ul ul a { }