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
may design the overall look and let a Web master do the actual coding
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.
What is a Web designer? Web design is loosely divided into:
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.
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.
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 />
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.
HTML Basics Other 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
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:
HTML Basics Buttons: <button type="button">Clicky click here!</button> How it will appear on the page:
Underline has become obsolete for regular text- except for hyperlinks <a href= “url”></a>
HTML Basics The 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>
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:
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.
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).
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.
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>