Html, CSS & Web Designing
36 likes12,767 views
A web designer creates presentations using coding languages like HTML and CSS that are delivered through browsers. They design the overall look and feel of a website and specify how pages are displayed. Web designers may work for companies, agencies, or freelance. They are responsible for graphics, layout, programming, and content. HTML is the basic language used to structure web pages using tags like <html> and <body>. CSS enhances HTML and is used to format text, backgrounds, borders, and more. CSS can be applied inline, with embedded stylesheets, or external linked stylesheets.
Html, CSS & Web Designing
- 1. HTML, CSS & Web DesigningLeslie Steele
- 2. What is a Web designer?A Web Designer is a person who skillfully creates presentations with special coding languages like HTML, CSS, etc. Those presentations are delivered through the World Wide Web via Web browsers. Web designers: may use Web-authoring software or an HTML editor to create the actual pages
- 3. may design the overall look and let a Web master do the actual coding
- 4. most often, they are also proficient with Web graphics and images.What is a Web designer?Web designers often work for corporations, marketing/advertising firms, web design shops, or as freelance designers.
- 5. What is a Web designer?Web design is loosely divided into:design (graphics, layout)
- 7. marketing (business goals, analysis, content)
- 8. IT (hosting)Web Design GuidelinesSite planning
- 9. Analyze the need for the site
- 10. Choose content
- 11. Graphics
- 12. Implementation & maintenanceHTML=hypertext markup language
- 13. HTML=hypertext markup languageHTML 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 BasicsHTML 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 BasicsOpen/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 BasicsHTML 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.
- 17. HTML BasicsHeading tags:<h1> </h1> - largest heading font size
- 18. <h2> </h2>
- 19. <h3> </h3>
- 20. <h4> </h4>
- 21. <h5> </h5>
- 22. <h6> </h6> - smallest heading font sizeHTML BasicsOther common tags:Paragraphs, headings - <p> </p>, <h1> </h1>Ordered list (numbered) - <ol> </ol>Unordered list (bulleted) - <ul> </ul>Tables - <table> </table> <tr> = table row <td> = table data - contains text, links, images, lists, forms, other tables
- 23. HTML BasicsForms <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 BasicsButtons:<button type="button">Clicky click here!</button>How it will appear on the page:
- 25. HTML BasicsHTML tags to format text:Bold = <b> </b>
- 26. Italics = <i> </i>
- 27. Superscripted text = <sup></sup>
- 28. Subscripted text = <sub></sub>
- 29. Underline has become obsolete for regular text- except for hyperlinks <a href= “url”></a>HTML BasicsThe basic structure of an HTML document:<html><head><title> </title></head><body>…WEB PAGE CONTENT GOES HERE... ANYTHING IN BETWEEN THESE BODY TAGS IS VISIBLE ON THE WEB PAGE…</body></html>
- 30. HTML BasicsSaving 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 BasicsIn 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. PaddingCSS=Cascading Style SheetsLinksBordersTextFonts Backgrounds TablesMargins
- 34. CSSThere 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).
- 35. CSSCSS can be used to format:Background color, image, & position
- 36. Borders color, style, & width
- 37. Font family, size, style, variant, & weight
- 38. Text alignment, decoration, indentation, spacing, & white space
- 39. Margin length & percentageCSS3 types of CSS: Inline style sheet, embedded style sheet, & external/linked style sheet.Inline style sheet example: <h1 style = “font-family: Arial; font color: purple”>This heading is purple with Arial font.</h1>
- 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>
- 41. What this code means: background color = beige; header 1 element font will be Century Gothic, right-aligned, & the color will be pale blue-ishgreen.
- 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.
- 45. paragraph element will be the same font, italicized, dark brown color, and 20 pixels high. The “a” element, or hyperlink, will be 22 pixels high with the same color as the headers.How it will appear on the page:
- 47. CSSExternal/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. CSSExample 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 pointsIt is important to note that the pages’ appearance will vary in different browsers because each browser renders the code a little differently.
- 52. Final pointsThere is much more to HTML & CSS than what I’ve shown you. Some excellent resources for learning Web design on your own are:W3Schools.comHTML.netHTMLdog.comYoutube.com