2c:null 2d:["$","title",null,{"children":"Webpage Foundations: an Intro to HTML and CSS | mmakutonin | Observable"}] 32:T796,frame`

Paper

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eros lacus, scelerisque eget mi id, consectetur pretium eros. Integer a orci mi. Nam pellentesque convallis libero, in porta arcu vehicula a. Nulla eu scelerisque enim. Donec pulvinar nisi id orci ultrices, nec blandit dolor rhoncus. Donec at lorem eget lorem commodo fermentum sed non metus. Maecenas turpis mi, eleifend eget lectus et, volutpat varius dolor. In interdum magna sed orci convallis eleifend. Phasellus ultricies condimentum augue vel scelerisque. Nunc ut iaculis risus, vel condimentum neque. Pellentesque elit nulla, sagittis in tincidunt eget, viverra eu mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed ut ipsum risus. Fusce eleifend ligula sed pulvinar ornare. Fusce aliquet felis nec velit cursus, vel rutrum nisi vulputate. In hac habitasse platea dictumst.

Maecenas accumsan accumsan suscipit. Ut vel erat ultrices, eleifend nisi ut, vehicula orci. Integer imperdiet mi ac erat mollis consequat. Duis eget ante eget lectus blandit euismod. Vestibulum rutrum id felis dictum mattis. Nunc eget laoreet est. Aenean urna urna, sodales maximus nulla et, laoreet ultricies lorem. Nullam in mauris rhoncus, tempus ipsum non, tincidunt libero. Praesent eu ipsum dapibus, tempor nunc sed, aliquet mauris. Cras pellentesque urna est. Quisque malesuada est vitae vehicula tincidunt. Donec convallis dui in mauris dignissim aliquam vel ac leo. Sed a euismod velit, nec luctus felis. Vivamus vehicula fermentum sapien, ac porttitor quam lacinia sed. Donec ac tempus leo.

`33:T8d1,frame`

Paper

`34:[] 30:{"id":"f941b8ea35f7384f","slug":"webpage-foundations-an-intro-to-html-and-css","title":"Webpage Foundations: an Intro to HTML and CSS","thumbnail":"3bd341f6bbd3ed77388603e446cb8db585e4d433b13aaa0644118ad4849a8ba0","access_level":"public","create_time":"$D2019-02-28T14:07:12.353Z","update_time":"$D2019-06-08T18:19:50.185Z","view_time":null,"first_public_time":"$D2019-02-28T21:55:52.773Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"bb1ac85e6e617203","login":"mmakutonin","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18644906b3e077e181742c57a3ff5752e32c431739eda8d84a9dfe241f87fd08","tier":"starter_2024"},"version":254,"publish_version":254,"role":null,"authored":false,"authors":[{"type":"individual","id":"9e68373e4597f5c1","login":"mmakutonin","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18644906b3e077e181742c57a3ff5752e32c431739eda8d84a9dfe241f87fd08","tier":null}],"members":[{"type":"individual","id":"9e68373e4597f5c1","login":"mmakutonin","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18644906b3e077e181742c57a3ff5752e32c431739eda8d84a9dfe241f87fd08","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"08de1be22b352915","slug":"it-280b-sp19","title":"IT-280B SP'19","owner":{"id":"bb1ac85e6e617203","login":"mmakutonin","name":""}},"type":"notebook","body":{"titling":"auto","title":"Webpage Foundations: an Intro to HTML and CSS","cells":[{"id":0,"value":"md`# Webpage Foundations: an Intro to HTML and CSS`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`## HTML`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md` Hypertext Markup Language (HTML) is the foundation of our website. Think of it as a Word Document; most things you can do when writing your final paper you can do with HTML.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md` ### HTML \\`\\` Syntax`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md` HTML works by separating content into different sections of the document demarked by HTML tags. Each section starts with a start tag \\`\\` and ends with a stop tag \\`\\` The framework of a basic HTML doc can be found below:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"/*ignore this top line*/ frame`\n\n\n\n \n \n \n \n \n\n \n \n Hello World! This is my first HTML Page!\n\n \n\n \n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"md`### Headers and Text Options\nWe have different options for text sizes in HTML:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"/*ignore this top line*/ frame`\n\n\n\n\n \n\n

Hello

My

Pretties

\n
\n\n

This is a paragraph of text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nisi nisl, facilisis vel venenatis non, sollicitudin ut diam. Vestibulum congue eu nunc non mollis. Maecenas ex nibh, mattis ac interdum sit amet, aliquam et diam. Vivamus viverra blandit magna id fermentum. Pellentesque quam urna, placerat vitae ipsum imperdiet, ullamcorper laoreet diam. Duis a eros ut turpis mattis vehicula. Aliquam erat volutpat.\n

\n\n And this is plain text\n\nsad;flhwioefhlk\n\n \n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"md`### Exercise:\nLet's make a pyramid by changing text types!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"/*ignore this top line*/ frame`\n\n\n\n\n \n

|_/\\\\|
\n |/\\\\___|
\n |_/\\\\|
\n |/\\\\_|
\n |_/____\\\\|

\n\n \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"md` ## Some Basic CSS Before We Continue`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"md` Cascading Style Sheets (or CSS) is how we make HTML pretty. Nobody wants to read plain text on a background; that's what memos are for! CSS is contained within its own tag in an HTML document:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"/*ignore this top line*/ frame`\n\n\n\n\n \n\n \n \n \n

|_/\\\\|
\n |/\\\\___|
\n |_/\\\\|
\n |/\\\\_|
\n |_/____\\\\|

\n\n \n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"md` CSS can identify elements to style based on the kind of element or tag they are or are contained in.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"md` ## Some More Advanced HTML`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"md`### HTML Forms and Inputs\nWhenever a webpage needs to collect input from a user, it can use an HTML form. These forms are enclosed by \\`
\\` tags and contain a bunch of \\`\\` tags. See example below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"/ignore this top line/ frame`\n\n\n\n\n \n\n \n
Text Input:
\n \n
Radio Input:
\n
\n
\n
\n \n
Button Input:
\n \n
Submit a Form Button:
\n \n
\n\n \n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"md` ### \\`\\` tags:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"md` Sometimes we want a pretty picture in our webpage. We can do that with an img tag:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"/ignore this top line/ html`\n\n\n\n\n \n\n \n\n \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md` ### \\`
\\` tags:\nSometimes we have a lot of stuff to put into our webpage, and want to organize it logcally instead of dumping everything into the \\`\\` tag. In these cases, we use nested divs to accomplish our goal.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"md` ## Tag Attributes\nYou can see that some of our input tags above have a keyword \\`type=\"someTextHere\"\\`. This isn't a separate tag, but apparently makes the input different, because it makes one input a textbox and another a radio button. \\n\nThis is called a tag attribute. Tag attributes vary between tag types (for example, divs will have different predefined tag attributes from inputs). \\n\nThis allows our divs not only to work to organize code, but also to group elements into certain categories for common JS and CSS operations. For example:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"md` It is important to note that each tag will have an id property and a class property that can be referenced by CSS style sheets (#idName for id, type.className for class).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"md` ## Assignment for over break:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"md` Create an HTML page and publish it on cssdeck: http://cssdeck.com/labs \\n\nFeel free to consult http://www.w3schools.com; it is an awesome resource for CSS and HTML. \\n\nAlso, see the following games that can help you learn flexboxes and pointers: \\n\nhttps://flukeout.github.io/ CSS Diner will help you with CSS selectors! \\n\nhttps://flexboxfroggy.com/ Froggy Flexbox will help you with flexboxes! \\n\nhttps://whatpixel.com/css-learning-games/ if you wanna go into greater depth than we will in this class, look at the other games at this link.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"md`### Website requirements:\nThe content of the website is your choice, but it must include the following elements (not all of which we've lectured on). This is meant to be creative, though, so remember to use your imagination and explore what interests you! As an extra incentive, the class will vote anonymously and the winning website will get one bonus exercise point!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"md`elements, tags, attributes \\n\nh1-h6, div, img, button, input \\n\nbasic CSS \\n\n - position \\n\n - display \\n\n - color \\n\n - background \\n\n - border \\n\n - margin \\n\n - units like em, px, %, pt, \\n\n - flexbox \\n\n -selectors \\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"md` ## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"import { frame } from \"@midnightpineapple/a-function-to-put-html-code-into-the-srcdoc-of-an-iframe\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"

Paper

How did I do?

Paper

How did I do?

Hello

My

Pretties

|_/\\\\|
\n |/\\\\___|
\n |_/\\\\|
\n |/\\\\_|
\n |_/____\\\\|

|_/\\\\|
\n |/\\\\___|
\n |_/\\\\|
\n |/\\\\_|
\n |_/____\\\\|

Text Input:

Radio Input:

Button Input:

Submit a Form Button:

Paper

How did I do?

Paper

How did I do?

Hello

My

Pretties

|_______/\\\\________|\n |______/__\\\\_______|\n |_____/____\\\\______|\n |____/______\\\\_____|\n |___/________\\\\____|

|_______/\\\\________|\n |______/__\\\\_______|\n |_____/____\\\\______|\n |____/______\\\\_____|\n |___/________\\\\____|

Text Input:

Radio Input:

Button Input:

Submit a Form Button:

|_/\\\\|
\n |/\\\\___|
\n |_/\\\\|
\n |/\\\\_|
\n |_/____\\\\|

|_/\\\\|
\n |/\\\\___|
\n |_/\\\\|
\n |/\\\\_|
\n |_/____\\\\|