COMP 1850 Lesson One

--- tags: COMP-1850 --- <style> .markdown-body h1:first-of-type { margin-top: 24px; } .markdown-body h1 { margin-top: 64px; } .markdown-body h1 + h2 { margin-top: 32px; } .markdown-body h2 { margin-top: 48px; } .markdown-body h3 { color: cornflowerblue; } .exercise { font-size: 150%; font-weight: bold; color: rgb(227,112,183); } .note { color: red; } </style> # COMP 1850 Lesson One ## Introduction Objectives: - Overview of web development and design - Learn ==HTML== (content), ==CSS== (presentation), and (a little bit of) ==JS== (behaviour) What You Will Learn: - Web and internet terminology (keep your eye out for acronyms) - How to mark-up pages by hand using HTML - Some basic interface design and usability principles - Cascading Style Sheets (CSS) and web scripting concepts - Best practices - Workflow: how to start, iterate through development, and test. How to automate processes - Accessibility (produce web pages that are optimized for Search engines, screen readers, etc) ### Development Environment Web Browser: Chrome, Safari or Firefox Text Editor: VSCode (or your preferred editor) ### Learning Hub All content and in-class examples are located on the ==Content== page All labs/assignments will be submitted to the ==Activities > Assignments== page ## Coding Strategies There are several techniques which can help increase your efficiency and ensure you write valid, well formed HTML code - Don't write too much code before testing in a web browser. it is easier to locate and fix problems when you test often - When you write a new HTML tag or comment, write both the opening and the closing before filling in the contents. Some text editors support Auto Complete, which will do this for you - Ensure the file you are working on in the text editor is the same file you are testing in the web browser. It can be easy to get mixed up, especially when you may often be working with several different files that share the same name, such as index.html. Read and compare the entire path displayed by both editor and browser to ensure the file is the same - All files and folders must comply with good naming conventions: this includes Case Sensitivity. Adopt a standard and stick with it, such as: all file and folder names are lowercased with underscores instead of spaces to separate words - use the W3C online validator to help you determine if the code contains any errors ### Suggested Workflow Settle on a procedure for getting you and your computer set up and ready to code, test and publish your pages. If you have difficulty getting started, consider adopting the following steps. Ensure you have the appropriate software installed: - Text editor with syntax highlighting - Web browser if you are creating a new file: - start the text editor - choose File->New to create a new file - add to the file the tags that constitute the essential HTML template - add text to the title tag, and add a small amount of content to the body tag - using 'Save As...' choose a filename and location for the new file, ==save the file with an .html extension== if you are maintaining an existing file: 1. start the text editor 2. use File->Open to browse and select the file you want to work with 3. open the file in a web browser, confirm the browser displays the expected result 4. add/refine the content in the text editor 5. save the changes 6. refresh the web browser 7. repeat from step 4 until page is complete ## HTML - hypertext markup language - Foundation of web pages - a set of "tags" that tells the browser how to display the information (and also helps search engines understand your page) - There are different versions of HTML, we are using HTML 5 ### Tags - Every tag has at minimum a name ```  <p>Hello World</p> ``` - Tags can either be self-closing or container tags ```  <p>Hello World</p>  <img /> ``` - Tags may optionally also have attributes, some of which are useful for us (class, id, src etc) and some that are outdated and should be avoided (any presentational attributes) ```  <img src="dog.jpeg"> ``` - Tags can have multiple attributes ```  <img src="dog.jpeg" alt="A pug chewing on a stick"> ``` - Tags can be nested inside other tags ```htmlembedded <p>  <a href="www.bcit.ca">BCIT</a> </p> ``` ### Basic Page Structure HTML documents must follow a strict basic structure ``` <!DOCTYPE html> <html> <head> </head> <body> </body> </html> ``` Pages are broken into two main sections: head and body - The head contains metadata about the file - The body contains the content ### Basic Browser Layout Tags (a.k.a. elements) can either be block, or inline - block takes up 100% of the width of its parent element - inline only takes up the width of its content ### Text Formatting Tags Headings (block) - use as page titles/subtitles or as logical headings for sections of a page (like chapters in a book) In order of importance (not size!) ``` <h1></h1>  <h2></h2>  <h3></h3>  <h4></h4>  <h5></h5> <h6></h6> ``` Paragraph (block) - use for body text ``` <p>HTML is for content</p> ``` Blockquote (block) - indents text from both left and right margin; used for quoting blocks of text ``` <blockquote>No good deed goes unpunished</blockquote> ``` Strong (inline) - use for important (i.e. bold) text ``` <p> This is <strong>very</strong> important </p> ``` Em (inline) - use for emphasized (italicized) text ``` <p> My HTML <em>should</em> be valid </p> ```