HTML, CSS & Web Designing Fundamentals

1. HTML, CSS & Web Designing Leslie Steele

3. may design the overall look and let a Web master do the actual coding

6. development (programming)

7. marketing (business goals, analysis, content)

9. Analyze the need for the site

10. Choose content

11. Graphics

13. HTML = hypertext markup language HTML is a coding language that makes up the basic construction of a Web page.Programs for coding HTML (called HTML editors) include Notepad and Notepad ++. Others include MS Expression Studio Web & my personal favorite, Adobe Dreamweaver.

14. HTML Basics HTML consists of commands in between angled brackets ( <> ), called tags or markup. These tags define the structure & layout of a Web page and specify how the page is displayed in the browser.

15. HTML Basics Open/close tags : <html> </html> self-closing: <br />, <img />, <hr /> Closing tags & self-closing tags require a forward slash ( / ) either in the closing tag or at the end of the self-closing tag: </h1> or <img />

16. HTML Basics HTML documents must start with html tags (<html>, </html>). The content in between the html tags describes the Web page. All page content in between the open/close BODY tags (<body> </body>) This means that everything contained between the <body> tags will be visible on the page.

18. <h2> </h2>

19. <h3> </h3>

20. <h4> </h4>

21. <h5> </h5>

23. HTML Basics Forms <form> </form> - used to pass data to a serverfrom the browser. Example: <form>First name: <input type="text" name="firstname" /><br />Last name: <input type="text" name="lastname" /> </form> How it will appear on a Web page:

24. HTML Basics Buttons: <button type="button">Clicky click here!</button> How it will appear on the page:

26. Italics = <i> </i>

27. Superscripted text = <sup></sup>

28. Subscripted text = <sub></sub>

30. HTML Basics Saving an HTML document: The document must have a file extension of either “.html” or “.htm”. Otherwise it is just a text file (.txt) and the code will appear in the browser as simple text, like this:

32. HTML Basics In a Web browser, when viewing the same code for a document saved with the “.html” or “.htm” file extension, nothing will be visible on the page since there is nothing within the <body></body> tags in the code.

33. Padding CSS = Cascading Style Sheets Links Borders Text Fonts Backgrounds Tables Margins

34. CSS There are standards & rules that apply to CSS just like there are with HTML. CSS is a separate “language” but it is not HTML. It enhances the display capabilities of HTML. The same HTML editors can be used to write CSS (Notepad, Notepad ++, among others).

36. Borders color, style, & width

37. Font family, size, style, variant, & weight

38. Text alignment, decoration, indentation, spacing, & white space

40. Example of Embedded CSS: <head> <title>My Web Page</title> <style type="text/css"> body {background-color: #F0E0B2} h1 {background-color: #58B79F; color: #EBFFFF; font- family: Century Gothic, sans-serif; text-align: right} h2 {font-family: Century Gothic, sans-serif; text- decoration: underline; color: #58B79F} h3 {font-family: Century Gothic, sans-serif; text-align: center; color: #58B79F} p {font-family: Century Gothic, sans-serif; font-style: italic; color: #47390D; font-size:20px} a {font-size:22px;color:#58B79F} </style> </head>

42. The h1 is different from the others because it will have a background color of its own.

43. header 2 element will have the same font, medium blue-ish green.

44. header 3 will have the same font & same color as h2 but will be center-aligned.

47. CSS External/linked style sheet- a separate file that contains all the styles for the html document that is linked into the <head> section after the <title></title>. The file is saved with a “.css” extension (i.e.- “mystyle.css”)… otherwise it’s just a text (.txt) file.

48. CSS Example of inserting the link to the style sheet into the HTML document: <head> <title>My page</title> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>

49. Example of an external style sheet code (in part): p {font-family: Gabriola; font-size: 18pt; color: #4F601A; text-align: center;} h1 {font-family: "Edwardian Script ITC"; font-size: 38pt; font-weight: lighter; color: #FFF; border-top-width: thin; border-right-width: thin; border-bottom-width: thin; border-left-width: thin; border-top-color: #DBEAAF; border-right-color: #DBEAAF; border-bottom-color: #DBEAAF; border-left-color: #DBEAAF; text-align: left; text-decoration: underline; border-bottom-style: inset;} h2 {font-family: "Edwardian Script ITC“; font-size: 34pt; color: #F2F8E0; text-align: center; border-top-width: 1pt;border-right-width: 1pt; border-bottom-width: 1pt; border-left-width: 1pt; border-top-style: solid; border-bottom-style: solid; border-top-color: #F2F8E0; border-right-color: #F2F8E0; border-bottom-color: #F2F8E0; border-left-color: #F2F8E0;} h3 {font-family: Gabriola; font-size: 22pt; color: #384505;}

50. How it will appear on the page:

51. Final points It is important to note that the pages’ appearance will vary in different browsers because each browser renders the code a little differently.

52. Final points There is much more to HTML & CSS than what I’ve shown you. Some excellent resources for learning Web design on your own are: W3Schools.com HTML.net HTMLdog.com Youtube.com

HTML, CSS & Web Designing Fundamentals

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a HTML, CSS & Web Designing Fundamentals

Similar a HTML, CSS & Web Designing Fundamentals (20)

Último

Último (20)

HTML, CSS & Web Designing Fundamentals