Tutorial 43
HIGHLY RECOMMEND Brackets! Brackets allows you to code in javascript html, xhtml, css, and html5. It also allows you to view a live preview of your website that updates as you write the code!
CHECK CSS TRICKS ONLINE FOR TIPS AND PROBLEM SOLVING
1. doctype tag:
2. html Tags:
3. head tags inside html tags:
4. title tags inside head: (info appears in tab heading on browser)
5. Body tags under head inside html:
6. Header inside body: h1 (biggest)-h6(smallest):
7. Paragraph tags in body text:
to seperate and space text.
8. Linebreak (single tag):
9. To make a horizontal rule (line):
Note (use CSS bold/italic etc. method instead of this one-more updated)
10. Bold: , Italics ("Emphasis"):
11. Comments:
LINKS:
12. Link element (anchor n hyperlink reference): link text
13. Link to another page in website: text for link
14: Link to section in page: tags on destination section of page, at the top of page or wherever you want the link make anchor tags with # sign: text
15. Email Link: text
16: Tool Tip: any text or link
IMAGES:
*Note: for faster loading website, shrink the image in a photo editor first instead of resizing it in the code.*
*In CSS always use url keyword with parentheses for images: {image:url(filename.jpg);}
16. Put image file in same folder of website. SINGLE TAG with src attribute:
17. Resize image: add height attribute in img tag and input number of pixels:
---------------------
TABLES:
To edit part of border: try https://www.cs.tut.fi/~jkorpela/html/cellborder.html
18. Inside these tags:
= table row (no text in between), inside table row tags: | = table data (columns which contain the data/text/images etc. You can add the border attribute in table tag to make a border (number of pixels):
19. Table Headers: centered bold text for categorizing columns. text | -place first on top inside the table tags.
20. Colspan attribute (Column Span): Use for main title/heading(s) on a table (can use with header tags( etc) for bold). use in first th tag and indicate number of columns to span. Ex: text |
21. TABLE WIDTH Attribute: In first table tag, define width by number of pixels or percentage: ex.
, or , etc.
22. cellpadding Attribute: Amount of space between data and the border. Ex.
23. cellspacing Attribute: space between the boxes (cells) of data in the table, kind of like a thicker border. Ex.
LISTS:
Keywords/tags: =unordered list, - = list item,
=ordered list
24. Unordered List: bullet point list (no numbers/order). Ex:
25. Ordered List: Numbered list. Ex. - item1
===========================================
CSS: Cascading Style Sheet
Note: Place style links at the top of the head before the script tags to load faster.
Color Resource: go to link and click on the color you want: https://flatuicolors.com/ -it copies the code to clipboard so you can paste it into your css stylesheet.
Note: Many properties to change - just look up a list online
26. In the tags at top, add tags
FORMAT:
27. Inside