Download presentation
Presentation is loading. Please wait.
Published byMarian Smith Modified over 8 years ago
1
DIGI KNOW? Intro to Web Development Bishoy Riad, Director of Web Development
2
capuma.ca/webdev-workshop Download Plaintext Editor sublimetext.com Follow along!
3
What is HTML? Core Markup Language + Structural Layer Stands for “Hyper Text Markup Language” Basis for all webpages!
4
Basic Structure of HTML !DOCTYPE declaration: tells browser the document is in HTML ■html element: denotes HTML portion of the document ■head element: denotes meta data hidden from end user ■body element: denotes visible (body) area of document
5
HTML Components 1. Predefined set of elements 2. Elements contain opening + end "tags" expressing content 3. Attributes contain additional information HTML element reference cheatsheet
6
Examples of HTML Elements ■Headers (h1 – h6): Big Title ■Paragraphs: Some paragraph text! ■Paragraph breaks: ■Hyperlinks: Google ■Images: ■Ordered bullets: bullet item 1 ■Unordered bullets: bullet item 1
7
Your Turn: Exercise 1 1.Create a level 1 header: “My first HTML document” 2.Add a link to CAPUMA’s website labelled “Marketing Association” 3.Add an image: http://www.capuma.ca/digi-know.jpg
8
Nesting Elements “Nested” elements are enclosed within other elements. Examples: ■Images pointing to URLs: ■Bullet lists: item 1 item 1a
9
Your Turn: Exercise 2 Set the Digi Know image from ex 1 to link to http://www.capuma.ca/
10
What is CSS? CSS serves as the Presentation Layer for HTML Stands for “Cascading Style Sheets” Describes how elements should be rendered!
11
Types of Cascading Styles 1.Styles linked in external CSS file 2.Embedded styles in the element 3.Inline styles within HTML code
12
Anatomy of a CSS Rule
13
CSS Selectors 1. Element Selectors 2. Class Selectors 3. ID Selectors
14
Element Selectors Define CSS rules that globally apply to all matching elements, for example: p p { color: red; } Will apply the color red to all paragraph elements: pp Lorem ipsum.
15
Class Selectors Defines rules that apply to any element containing a user- defined class, for example:.blue-header.blue-header { color: blue; } Will apply the color blue to any elements with the named class attribute of blue-header, such as: class="blue-header" Foobar
16
ID Selectors Defines rules that apply to a singular element containing a user- defined id, for example: #no-underline #no-underline { text-decoration: none; } Will apply the removal of the default hyperlink underline from a specific element with a named id attribute of no-underline: id="no-underline" Google
17
Your Turn: Exercise 3 For only the first hyperlink, change the color to red (HINT: use a class or an ID)
18
Solution Exercise 3 solution
19
Online Learning Resources ■Code Academy ■Udemy ■Lynda.com ■Team Treehouse ■W3Schools ■Mozilla Developer Network ■SitePoint ■CSS Tricks
20
Helpful Tools ■XAMPP (locally hosted test server) ■Sublime Text 2 (plaintext editor with syntax highlighting) ■Adobe Dreamweaver (dev environment with debugging and other utilities) ■Browser Developer Tools (Webkit Developer Tools, Firebug, Edge Inspector)
21
Thank You!
Similar presentations
© 2024 SlidePlayer.com. Inc.
All rights reserved.