ATCM2335 Building Blocks of HTML - University of Texas at Dallas
•Download as PPTX, PDF•
0 likes•459 views
This document discusses the ATCM 2335 Internet Studio course from 2008 and provides resources for web development. It introduces tools like the web developer toolbar and frameworks like Vue.js and React.js that are supported in modern browsers. Several design inspiration websites are also listed like Logopond, The Dieline, The Design Inspiration, Dribbble, and Pentagram.
Recommended
More Related Content
More from Ken Starzer
More from Ken Starzer (14)
Recently uploaded
Recently uploaded (20)
ATCM2335 Building Blocks of HTML - University of Texas at Dallas
- 1. ATCM2335 INTERNET STUDIO ATCM 2335 INTERNET STUDI
- 17. 2008
- 60. Vue.js
- 61. reactjs.org
- 65. Supported in All Modern Browsers
- 73. 56 57 66
- 74. line 57
Editor's Notes
- Welcome back. We are on week 2: we begin learning about HTML and discuss your semester project.
- Let’s talk about the three building blocks of all web pages:
- - HyperText Markup Language (HTML) - Cascading StyleSheets (CSS) -JavaScript (JS) Each of these three building blocks contributes in a unique way to what is displayed on your web browser.
- HTML’s two main functions are to display the page contents and structure the code surrounding your content.
- CSS handles how the page looks (appearance) and the way it is displayed (layout).
- JavaScript deals with how you interact with a website.
- For this class week, we’re going to examine HTML. We’ll briefly examine CSS and JavaScript.
- But first, we’ll need to install an extension in our browser. Extensions are user-created tools that add features and functionality to your browser. The Web Developer toolbar can be downloaded from bit.ly/webdevtoolbar This is a very powerful and useful toolbar. You’ll see why in a minute. It is available for both Firefox, Chrome, and Opera. Similar toolbars are available for Microsoft Edge and Safari. For the purposes of our class, we will be using Firefox. Install this on your computer at this time.
- So let’s take a closer look at HTML. Do you remember the two primary uses of HTML?
- …content and structure.
- We are going to learn about the difference between HTML and CSS. Visit csszengarden.com in Firefox. Make sure you have the Web Developer Toolbar installed.
- Now that you have the Web Developer Toolbar installed on Firefox, click CSS > Disable All Styles. This will display just HTML tags without any additional styling.
- Now that you have the Web Developer Toolbar installed on Firefox, click CSS > Disable All Styles. This will display just HTML tags without any additional styling.
- Sometimes its easier to learn by deconstructing. Who hasn’t taken apart something to discover how it worked (perhaps only to learn you couldn’t put it back together!). What you’re seeing here is only HTML code, the web page has been stripped of all styles and layout, anything dealing with its appearance. That’s what CSS does. We are looking at this HTML page without CSS turned on.
- Sometimes its easier to learn by deconstructing. Who hasn’t taken apart something to discover how it worked (perhaps only to learn you couldn’t put it back together!). What you’re seeing here is only HTML code, the web page has been stripped of all styles and layout, anything dealing with its appearance. That’s what CSS does. We are looking at this HTML page without CSS turned on.
- ... in fact, HTML hasn’t changed much. Here is an example of one of the very first webpages dated November 3, 1992 from the World Wide Web Consortium.
- The HyperText Markup Language (HTML) is the publishing language of the World Wide Web. The first version of HTML was described by Tim Berners-Lee in late 1991. The most commonly used version of HTML is version 5. Much of this class will use HTML5.
- Here are some of the HTML tags associated with this page. We’ll examine HTML tags shortly. Tags identify the structure of the page. For instance, the <h1> tag identifies the page title, in this case css Zen Garden. The other headings (<h2> and <h3>) indicate sections within the page. The <p> tags, or paragraph tags, indicate paragraphs on the page.
- Here’s another way of learning more about the HTML elements on the page. Click Information > Display Element Information.
- Here’s another way of learning more about the HTML elements on the page. Click Information > Display Element Information.
- Here’s another way of learning more about the HTML elements on the page. Click Information > Display Element Information.
- Now you have an address bar and an Element Information box at the bottom of your web page. Rolling over elements will display the unique elements. It shows the structure and gives you a lot of information.
- Now let’s take a look at the code. The shortcut to view code on Firefox for Mac is option (⇧) + U. You can inspect the code of every single web page you visit and figure out how it was constructed. Unlike other programming languages, HTML code is not compiled so you see the code exactly as written by the web developer. At the bottom left the browser identifies the line and column number your cursor. Don’t be intimidated, you’ll be surprised at how understandable this can be.
- First is the doctype, or line 1 of the code. Document type declarations simply tell the browser you are using how to render the code on the page and also how the the elements on that page should be structured. There are different document type declarations. In this example, we are using the Strict Rendering, which means all the code must be perfectly written and ordered. HTML5
- HTML tags (in purple) are the tags used to structure (or “markup”) the content on the page. Each tag has a beginning (e.g. <div>) and an end (e.g. </div>).
- HTML attribute value allows you to associated properties, called attributes, which may have values (by default, or set by authors or scripts). Attribute/value pairs appear before the final ">" of an element's start tag. Any number of (legal) attribute value pairs, separated by spaces, may appear in an element's start tag. They may appear in any order.
- HTML attribute values are names assigned by the developer for each attribute. For example, the value of the <body> id is css-zen-garden. Id and class information play very important roles on HTML pages. They are used: in stylesheets, to style elements as an anchor tag for hypertext links as a means to reference a particular element from a script
- Comments (in green) are informative and seen only in code view -- they are not read by the browser and not “compiled”. Comments may instruct other web developers about features of the code or, in the case of the css Zen Garden, explain aspects of the website. Some coders will add “easter eggs” to their code meant to be enjoyed by other curious web developers.
- The page contents (in black, regular text) can be seen in code view as well.
- Special characters that don’t appear on your keyboard are assigned specific values (beginning with an ampersand ‘&’ and ending with a semicolon ‘;’). For example the ⇧ character is assigned the following code: ⇧
- So these are the pieces that make up the content and structure of every HTML document. We’ll examine HTML tags in more detail in the second half of this class.
- So now let’s take a look at cascading stylesheets. Do you remember what CSS handles?
- CSS handles how the elements on the page appear and how the information on the page is visually laid out. Let’s take a look at how this works.
- This is what a Cascading Style Sheet (CSS) file looks like. Notice that in this view the CSS code is not labeled by color, unlike the HTML code.
- Like HTML, this also has comments (which are written between /* and */). Dave Shea, the creator of CSS Zen Garden, wrote his thoughts here. Although authored in 2003, this website still does a great job showing the relationship of HTML and CSS.
- T!hese HTML tags should look familiar to you: html, body, p. These are the specific instructions on how these HTML tags should be styled. Notice the instructions for body. These line that begins “font: 75% georgia, sans-serif;” tells the browser to use the font Georgia for elements in the body tag at 75% font size. We’ll examine CSS more next week.
- T!he CSS file references not just HTML tags as we just saw, but also custom elements. For example, the line of code in the HTML file <!div id=”container”> is referenced in the CSS file.
- Let’s talk nuts and bolts of CSS. A cascading stylesheet is usually an external file that tells the browser how to display HTML elements on the page.
- Here’s the stylesheet for the csszengarden.com website we’ve been looking at. It’s in a folder called “001” and is named “001.css”.
- A cascading stylesheet is usually an external file that tells the browser how to display HTML elements on the page. Notice that the images are not referenced from the HTML file. They are referenced from the CSS file.
- You’ll need to restore the CSS and hide the element information.
- Click around the different designs on the css Zen Garden website and you’ll see very different page layouts. Closer inspection will show you that while the page layout differs, the content on each of the pages is exactly the same. For example, this page design called A Walk in the Garden designed by Simon Van Hauwermeiren, has the exact same content as ...
- ... this design by Eric Stolz called Under the Sea! -- which is exactly the same content as ...
- ... Make ‘em Proud designed by Michael McAghon and Scotty Reifsnyder.
- With one exception, these three pages are exactly the same. The only difference between these three pages (and every other page on the css Zen Garden) is line 18, which links to the cascading style sheet (CSS) file. A cascading stylesheet is usually an external file that tells the browser how to display HTML elements on the page.
- The CSS file tells the browser how to display fonts, colors, borders, boxes and even ...
- ... images. This is means a visual website redesign can be done without ever touching touching the HTML code -- all you need to do is edit the CSS file to change the way a website looks.
- This is a very brief introduction into JavaScript. Javascript handles ...
- ... Behavior and Interactivity. Let’s see what it does.
- Pull up maps.google.com in your browser and do a few searches, interact with the map, click around. All of these behaviors use JavaScript.
- JavaScript can be difficult to get started with, so there are libraries that make it easier. Here’s a widely used JavaScript library, Vue.js
- React is another JavaScript library. Both Vue and React are excellent libraries.
- To sum up: - HTML, CSS and JS are the three building blocks of web pages. - HyperText Markup Language (HTML) handles content and structure. - Cascading Style Sheets (CSS) handles appearance and layout. - JavaScript (JS) handles behavior and interactivity.
- To sum up: - HTML, CSS and JS are the three building blocks of web pages. - HyperText Markup Language (HTML) handles content and structure. - Cascading Style Sheets (CSS) handles appearance and layout. - JavaScript (JS) handles behavior and interactivity.
- As if it wasn’t complicated enough, each browser interprets HTML, CSS and JavaScripts slightly differently. We’ll explore how browsers interpret code differently in a later class.
- So let’s take a closer look at HTML. Do you remember the two primary uses of HTML?
- ... content and structure. We’ll now look at how to correctly write the building blocks of HTML code, tags.
- Remember that you can look at the source code of every website. What we will examine, HTML tags, are identified by the purple color.
- With a few example, HTML element appear in tag pairs. Here is the syntax of the start tag. The tag has brackets around it.
- ... following by the content that will appear on the webpage.
- And completed by a closing tag. Notice the closing tag has brackets around it as well, but also has a slash sign.
- These three pieces -- start tag, content and end tag -- make up an HTML element.
- Here are a few examples from the CSS Zen Garden website. We will discuss what each of these tags mean shortly.
- Let’s take a look at an HTML element on the css Zen Garden website, namely line 57.
- What is this piece?
- The start tag.
- This is the…?
- … end tag.
- And within the start and end tag is ..
- ... the content that will appear on the webpage to viewers.
- All three of those pieces are what make …
- ... an HTML element.
- So, what’s this then?
- It’s a tag attribute. In this case, the title attribute tells the browser that CSS is an acronym that means Cascading Style Sheets.
- The words in blue are the attribute value, that is, what the attribute is equal to. The attribute and value pieces are optional.
- So let’s try creating some HTML.
- You don’t need special tools for making HTML ... it can be written using Sublime Text, NotePad (Windows) or TextEdit (Mac). Specialized HTML editors can offer convenience and added functionality. We’ll start using a plain text editor because it’s important that you learn how to write code properly.
- Here is the 14 lines of code that makes up the basics of a web page.
- Every HTML page needs a doctype declaration (line 1) to instruct the web browser how to interpret the subsequent code. Line 2 <html> indicates that HTML code will follow. Line 3 </html> indicates the end of the HTML code. Every well-ordered, properly structured HTML page on the planet ends exactly the same way, with </html>. Note that when you begin an HTML tag, you should immediately close the tag. We are creating a page that has 14 lines of code, but many pages have 100+ lines and not closing the tag can introduce errors on your website. Let’s learn how to code properly from the start.
- Now, we’re going to add a <head> element. The head element represents a collection of metadata for the webpage. Contents in the head tag are not displayed on a web browser. Everything here is, as far as visitors to your website are concerned, invisible. Note that the head element needs an opening and closing tag.
- The alpha and omega
- Now we will add elements inside the head element. Line 4 indicates that we are encoding this page using UTF-8 (the 8 bit version of the UCS Transformation Format). This is the dominant character encoding for all web pages. In theory, any HTML document can specify any character encoding; in practice, browsers ship with a limited set of encodings that they support. Anytime you create a webpage, include this meta element in your head element. Notice as well, that this meta element does not have a end tag. The title element is what will appear at the top of your browser when you view it. Notice that elements within the head element are indented. This makes it easier for us humans to read.
- The <html> ... </html> contains a head element followed by a body element. The body element represents the main content of the document. The <body> ... </body> contains the markup with the visible content content. Remember everything within the <head> ... </head> contains the invisible content.
- We will now add a heading to the page (the <h1> element) and a paragraph (the <p> element). In addition, we will add a code comment that will not appear on the page. The code comment is visible only to the curious onlookers to view your code. Save your file and view it in a web browser.
- Influence and inspiration are two easily confused terms that mean very different things. Let’s examine the difference. Many good designers aren’t able to explain a visceral difference between the two. Your semester project should focus more on inspiration and less on influence.
- Influence is borrowed, it’s something you get from other people, ideas or things. Influence affects your perspective, but isn’t necessarily a brand new perspective.
- If you’ve been asked to create a logo, you might visit LogoPond to see what you might design. Viewing these logos influences your perspective on the logo you have to create. You may find elements you like and use them in the logo you have to create. That’s influence. Chances are you won’t come out with a new perspective about the logo you have to create, which is inspiration.
- Here’s a website that I visit that influences me about package design.
- ... and css websites.
- ... and a website that shows me what other designers are working on.
- ... and a blog about an excellent design firm, Pentagram.
- While influence is borrowed from other sources, inspiration is earned. And it comes from within. Influence is the raw materials that can lead to inspiration, but it is not inspiration itself. Inspiration happens when you see a problem and find a unique solution to that problem -- without copying someone else’s solution.
- Here’s a great example. You get home from a long day of working, drinking -- whatever -- it’s dark outside and you can’t get that key aligned in the keyhole. The “V Lock” solves that problem by guiding the key into the keyhole. This is inspired because the designer created a unique solution to a problem that many people face. She didn’t copy a design, but improved on lock design by creating her own.
- James Biber’s redesigned Starbucks logo (*$) didn’t get chosen, but it was very different from all other logo submissions. He could visited LogoPond (see earlier slide) but instead he used what was core to the name starbucks, a star (*) and the dollar sign ($, bucks) to create something entirely new, different but still embodies the core values of Starbucks. This is inspiration because the solution he created came from within and not from copying other designs.
- Designer Ben Fogarty decided that a resume didn’t adequately describe all of his knowledge, so he used his visualization skills to create this chart that visually explains his path through life. He was influenced by his knowledge of data visualization and charts. The inspiration came when he used that knowledge to the problem of resumes and created an entirely new visualization.
- This book started as a personal project in summer 2007, and was soon published from a Japanese bookstore "Utrecht". It's a flipbook, but rather than seeing animation, it creates a 3D rainbow in your hand. Since being published it has been featured on Japanese TV, Newspapers, major news and blogsites like yahoo news, coolhunting and fffffound. This book won a NY ADC silver cube.
- In all of these inspired designs, the designers knew of a problem. The solution they came up with was only as good as their understanding of the problem.
- I know some of you will say, “Inspiration is great. But I can’t be inspired like these designers. It doesn’t happen when I want it to. And it seems that when I want to be inspired, I never am.”
- It doesn’t matter what works for other people. Figure out what inspires you.
- You may not be able to schedule inspiration to your convenience, but you certainly can create the environment and opportunities for it to come about.
- Inspiration can strike at any time and usually at inconvenient moments: in the middle of the night, during a movie, in the shower ...
- ... that’s why I asked you to keep a sketchbook. When inspiration strikes your sketchbook should be nearby. You don’t have to spend a lot of money.
- ‘Nuff said.