1.66k likes | 3.26k Views
Intro to HTML & CSS. Intermediate Website Development Christy Wedge. Web Development Software. Text editors – Notepad, TextEdit Online sites – WordPress.com , Blogger, Google Sites, Yahoo SiteBuilder , Web.com Dreamweaver, GoLive , FrontPage. Web Browsers. Firefox Internet Explorer
E N D
Intro to HTML & CSS Intermediate Website Development Christy Wedge
Web Development Software • Text editors – Notepad, TextEdit • Online sites – WordPress.com, Blogger, Google Sites, Yahoo SiteBuilder, Web.com • Dreamweaver, GoLive, FrontPage
Web Browsers • Firefox • Internet Explorer • Chrome • Safari • Opera
HTML • Language • HyperText Markup Language (HTML) • The standard document type for websites • Provides structure
HTML Syntax • Vocab: Elements, Tags, Attributes, Content • Tags <p> • Elements require an open and close tag <p>Content</p> • Sandwich tags <body><p>Content</p></body> • Attributes – define characteristics such as height, width, color, etc. <p style="color:red";>Content</p>
HTML Page Structure <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><title>Basic example document</title></head><body></body></html>
CSS • Cascading Style Sheet (CSS) • Defines the look or format of the HTML file by specifying margins, line spacing, indents, font sizes, etc • Similar to the Attributes part of HTML • Provides flexibility and control of the presentation
CSS Syntax • Vocab: Rules, selector, declaration, property, Valuep {color:blue;} • 3 types: Inline, Internal and External • Inline <p style="color:red";>Content</p> • Internal <head> <style type=“text/css”>p {color:blue;} </style> </head>
CSS Syntax cont. • External <head><link href="blog/content/themes/style1.css" rel="stylesheet" type="text/css"> <link href="style2.css" rel="stylesheet" type="text/css"></head> p {color:green;font:arial, sans-serif; }
Hosting • Blogs or free services – Blogger, WordPress, Google sites • Paid Service – GoDaddy • Choose and purchase a URL/Domain name • Cost – Monthly, yearly, etc. • Traffic/Bandwidth, Disk space, File limitations • FTP access • Reliability • Technical support • Control panel – Usability • Email services
Resources • W3Schools.com • YouTube Videos • Library Books • About.com • Wikipedia