University:
Boston University
Course:
MET CS 201 | Introduction to Programming
Academic year:

2019
Views:

328

Pages:

13
Author:

5CelestialChronicle

WEB DESIgN What is Web Design? ● ● ● Web design is the process of creating websites. It includes many different aspects such as web page layout, content production, and graphic design. Web design uses HTML and CSS program languages to create the website. HTML ● HTML stands for ○ Hyper ○ Text ○ Markup ○ Language ● HTML is the layout of web pages. ● Structured using tags such as ○ Paragraphs ○ Lists ○ Headings ○ Footers ● This programming language is used to indicate how each piece of information is displayed on a website How to use Html In HTML, the page is displayed or structured using tags. Tags are very important because they tell the computer where to start and end For example, if you type... < p >Once upon a time, there was tomato. The End. < / p > < ul > < li >Bird (Michelle)< / li > < li >Llama (Leah)< / li > < li >Cat (Ruth)< / li > < li >Tiger(Afifa)< / li > < / ul > < footer >Artemis 2017< / footer > You get… Once upon a time, there was tomato. The End. ● ● ● ● Bird (Michelle) Llama (Leah) Cat (Ruth) Tiger(Afifa) More examples I like to < b >CODE!< / b > I like to CODE! I like to < i >CODE!< / i > I like to CODE! I like to < u >CODE!< / u > I like to CODE! < h1 >Hello World< / h1 > Hello World < h2 >Hello World< / h2 > Hello World < a href=”google.com” >Google< / a > < img src=”googlelogo.jpg” > Google We created websites using HTML and CSS. This is what the code looked like! And this is what the website looked like! Pr og r mo am re s … om e . b a .. e at it h s .W eb . w w. l o W fu ti u ea Messed up and don’t know where? Don’t worry, HTML programs tell you where your error is. css ● ● ● ● ● CSS is an acronym for Cascading Style Sheets It adds colors, fonts, borders and backgrounds to the website In HTML, you would have to specify every time you want a heading to be a different size or color; with CSS you can design a style for a specific section of your website. Your website design is easier to modify with CSS than HTML CSS makes the website look pretty! How to Use CSS Selector h3 { color: green; } Value Property Key: ● ● ● Selector: what to style (i.e. header 3 or h3) Property: what to change (i.e. Color) Value: What to see (i.e. turquoise) Example: This is Header 3 Classes and identifications ● ● ● ● ● Anything you want to be read by the computer must be in between two curly brackets {} Use a semicolon at the end of each line The Selectors are usually HTML elements without the “< ” and “ >” Classes categorize specific elements. ○ Classes can be named and referred to later with that name. ○ If you want certain paragraphs to have the same font color, you would use classes. Div = Logical Divide ○ It’s like a container ○ Can use ID to refer to them ○ Div lets you style everythig with the ID at once. (similar to Classes) HTML < HTML > < body > < div class = “Weird” > < p >WOAH< / p > < p >Okay< / p > < p >Jelly< / p > < / div > < / body > < / html > CSS .Weird{ color: blue; } Outcome WOAH Okay Jelly “BE WHO YOU ARE, NOT WHO THE WORLD WANTS YOU TO BE” -Unknown 100% You 100% True This is Coding