HTML/CSS Lessons 2021-04-01 Lesson One: + History - HTML: HyperText Markup Language - The idea behind "hypertext" is that it is text that links documents together, creating a huge interwoven web of content - This was inspired by an application for the Mac called Hypercard, which allowed you to create linked pages of documents and build entire applications with them (virtual rolodexes, libraries, games, etc). HTML is a document markup language that allows you to create hypertext which can be viewed and explored in a web browser. - Tim Berners' Lee, an employee at CERN, began publishing his ideas for HTML and what would ultimately become the basis of the web in 1991. He developed the very first web server, browser, and site on top of work many people had already done in building up the internet (keep in mind that other things like domain names, TCP/IP, and e-mail already did exist at this time, even if it wasn't widespread). - The language and technologies were decidedly open for anyone to use without licensing, permission, etc. - HTML continued to expand and by the mid-1990s the web was so popular that it drove up demand for internet service by an insane amount. Hopes from a decade before that someday every single home would have a home computer were being realized largely because of how big and important the web was becoming. - While the web is compromised of hundreds and thousands of different technologies, servers, programming languages, etc., the root of it all is HTML. + Important notes: - Currently we're on version 5 of HTML (aka HTML5). Each version brings new ideas and revisions. I'm going to do my best to teach best current practice, but I'm also going to teach about older things that are less and less used in modern web design. We're gonna start small, get bigger. - Not *all* of my teachings are going to be necessarily best practice because many "best practices" have changed since I began coding in middle school. I am going to /try/ to start out with the more simple practices that I continue to use and then as we get into CSS show the preferred practices now. - The Internet !== The Web. They are two different things -- the World Wide Web is a technology built on top of the internet and is a part of the internet. Phrases like "the World Wide Web" might seem dated today, but they are specific terms - HTML is a language typically served over the internet via a protocol called HTTP (hypertext transfer protocol) or HTTPS (hypertext transfer protocol secure). You don't have to worry about that right now. - Coding !== programming. HTML is coding, not programming. + Today's Tags: - , , ,
- att
: href - , , -


, , -
- - att: src, alt, width, height - (just for fun) + Today's exercise: - Build a webpage that's about YOU. Give your name (or an alias), link to your public social media if you have any, include any pictures you might like to have, quotes you like, jokes you want to share, etc. - Today's tools: NOTEPAD or NOTEPAD++ 2021-04-08 Lesson Two: + Web 1.0, 2.0, 3.0 - Web 1.0 was mainly static pages with little user interactibility. If you wanted content on the WWW 1.0, you had to code it and put it up yourself. - Web 2.0 opened the gates to user interactibility and social media. This included forums, art websites (like deviantArt), early social networks, and even modern social networks we still have today. A LOT of what we still see and use day to day on the web would be considered part of Web 2.0 - Web 3.0 is web in the real world -- web-based devices, services, etc that are intermixed with non-browser experiences. This also includes things like AI served over the web, blockchain, distributed web, etc. - These aren't really concrete versions of the internet that only exist at one time or are standards people abide by -- these are just observations about what the web looks like and how it is evolving/has evolved. + Standardization Across the Web - There are tons of different web browsers with tons of different code - The web is a beast, and someone has to keep it tame - The World Wide Web Consortium (W3C) is an organization that was started in the 90s to develop standards for browsers to use and keep the web standard no matter what device or browser you're using. It's currently lead by Tim Berners Lee, the founder of the World Wide Web - There are also ample resources available online for web development that focus on helping developers maintain web standards, like W3Schools and The Mozilla MDN Web Docs + Today's Tags: - - (deprecated) - - att: style - css: color, text-decoration, font-family, font-size - , (table row),
(table column), (table header cell) - att: colspan, rowspan - css: width, background-color, border, padding -
    (unordered list),
      (ordered list),
    1. (list element) + Today's Exercise: - Imagine that you're going to the Amazon store this weekend, and they have every and anything that you could want that's listed on Make a table with a column of the things that you want to get, along with another column of hyperlinks, along with another column of prices. You can include pictures somewhere on your page of your favorite things that you want. Then, make a list -- either ordered or unordered -- of the things you want to do after you leave the Amazon store. You can also write a short blurb about why you want certain things or what your plans are to do with them. Decorate your page however you'd like and include any extra information that you'd like. It's all up to you. - Today's tool: NOTEPAD++ 2021-04-22 Lesson Three: + Today's Exercise: - Practice the things you've learned in the past two lessons by using the skills you've gained so far to create a page all about a specific video game/television show/movie/etc that you like. It can be as specific as a particular episode or as broad as an entire series. The sky is the limit -- just be sure to collect images and be able to write text for it. If you quote text from other sources on the internet, please link to those sources! Also feel free to link to the pages you've produced thus far in these lessons, available at It is not required but is heavily encouraged for you to contain the majority of your page in something like a table, but this is YOUR page and YOUR decision. + Possible helpful CSS style: background-image - Example: ....