Module 1: Designing a Web Page with HTML and CSS

Hi, I’m Susan. I’m really excited to be working with our
team at Duke to introduce this course on the foundations of computer programming
with JavaScript, HTML, and CSS. We designed this course for beginners with
no previous experience in programming who want to begin to explore
a career in programming. In this course, you will begin to learn how to think
like a programmer, analyzing problems, designing solutions called algorithms, and
translating your algorithms into programs. Using HTML, CSS and JavaScript, you will be able to see your programs in
action by building interactive webpages. A useful skill to have, whether you
decide to go further in programming or use these web development
languages in other fields. >> Hi, I’m Robert and I hope you’ll enjoy
the interesting projects we’ve made for you to complete in this course. In week one, you will learn to
create your own webpage using HTML, the language that defines the structure
of your webpage, as well as CSS, the language that lets you change
the appearance of your webpage easily. Next, in week two, we’ll tackle the green
screen problem, where I and Drew, who you’ll meet next, will launch
into outer space with dinosaurs. To do this we will learn some important
programming concepts with JavaScript. With a focus on manipulating images
using special JavaScript libraries we’ve designed. The programming concepts and skills you will gain will serve
you well as a programmer, whether you are working with JavaScript or
any other programming language. In the third week,
we will bring together our HTML, CSS, and JavaScript skills together to
make your webpages interactive. By the end of this course, you will have
designed a webpage that allows users to upload their image files and
apply image filters that you created. >> Hi, I’m Drew. One of the most important concepts you
will learn is how to solve programming problems. This will build the foundation for you to understand what computer scientists
do and think about as they write programs. Knowledge that will be useful to you, whether you continue on to learn
more programming yourself, or need to collaborate with computer
scientists to create programs together. The skills you will learn are applicable
to any programming language, not just JavaScript. While the syntax may
be a bit different for other languages you will learn,
the same fundamental principles apply. >> Hi, I’m Owen. After finishing this course,
you’ll be ready to make webpages and to program in JavaScript
as well as other languages. If you decide to continue in our
specialization on Java programming, you’ll use the programming foundations from this
course to learn how to solve problems and write code with Java. In addition, the web development skills
you’ll learn in this course will come in handy in our capstone project, where
you’ll learn to create a webpage to host a recommendation system] that you build
and develop, similar to how Amazon or Netflix recommends books or
movies based on a user’s preferences. Now that you know what this course
is about, let’s get started.

I’m here with Aleis Murphy, who finished
her Undergraduate Degree at Duke last Spring, did an internship at
IBM this past summer, and is going to be a Master’s
student at Duke this fall. So Aleis,
you’ve been programming since high school. Why don’t you tell us a bit about
how you got into programming? >> Sure.
I actually took my first class, AP Computer Science AB,
the last year it was available, in my sophomore year of high school. My mom was actually a computer
science major in college and my dad was a stats major. They own a website company. So they told all of my sisters and
I at least give computer science a try. It’s definitely worth knowing even just
the basics of Java and if you like it, you can pursue it. If you don’t, you don’t have to,
but it’s good to know. And after my first class, I was hooked and
it’s been history ever since. >> So what got you hooked on computer
science in your first class? >> I think when the first time
that I was looking at it, it just seemed like everything
I was exposed to was just so over my head almost. It was just like, I remember thinking
to myself, anyone who understand this, anyone who can explain this
like it’s easy is a genius. And then I had my first
moment of just getting it and I knew that I was one of those people. So every time I have one
of those aha moments, then I remember how exciting it is
to get a program running right. >> So to wrap up, we have lots of people out here from
a variety of different backgrounds. Do you have any word of advice or
wisdom for them as they delve into
the field of computing? >> Yeah, I guess, the biggest point
I would have is just that a lot of people think of computer science as
something that only a computer scientist needs to know, or someone who’s
going to have a hard coding job. But honestly,
computer science is in every field and can benefit really
anyone that takes it and knows about it, which is probably
the coolest thing about it. It really is in every field and
advancing every subject. So anyone can benefit from
learning computer science. >> Okay, great. Thanks.

Hi, I’m Elizabeth. I’m part of the instructor
team here at Duke University. Before you get started with this course,
I want to make sure you’re aware of some important resources, and
give you some tips for doing well. In this course you’ll see readings
labelled try it and programming exercise. Try it readings encourage you to try
things you’ve seen in the videos yourself so that you can get
more practice writing code. Programming exercises contain instructions
to help you write your own programs. There are also quizzes, so that you can
make sure you understand everything from the videos, and
check that your code works properly. I also want to show you the course site,
dukelearntoprogram.com. You can see we have a page for
each course, and a page of frequently asked
questions about the specialization. This has everything from certificates
to the software we use in the course. If you go back to the home page, and select the course you are working on,
you’ll get to that courses main page. First, let’s look at
the Duke JavaScript Environment. You’ll learn all about its features later
in the course, for now just remember that you can get to it on the Course
1 Duke learn to program website. Project resources contains
examples from the videos so you can look at that code in more
detail or experiment with it. Documentation has a summary of the HTML,
CSS and JavaScript you will learn in this course. This is useful if you want to review
the syntax of an HTML element, or see what JavaScript methods you can use,
for example. This isn’t the full documentation for
all of HTM,L CSS and JavaScript but it’s a useful reference for this course. Plus, we have the frequently
asked questions or FAQ page. The first thing you should do when you
have a question about an assignment or a quiz is check the FAQ page, to see
if we already have an answer for you. This page has questions about Course 1, since we’re in the Course
1 part of the site. For questions about
the specialization as a whole, there’s a link up here back to the general
FAQ page that you saw earlier. So hopefully this video has given you an
idea of how the course is structured, and what resources you’ll need to know about. If you have any feedback about how we can
make these resources more useful to you, please let us know in
the discussion forums on Coursera.

To help you do your best, we want to give you some suggestions
about how to learn in the course. First, do a little each day. It’s really hard to learn
programming all at once. If you do a few course items each day
instead of trying to do it all in a day or two, you’ll remember things better,
you’ll be more motivated, and you’ll have more time to work
through problems in your code. Speaking of problems with code, also known as bugs, it’s normal to
make mistakes when you’re programming. So our next step is, don’t give up. Everyone gets bugs in their programs and part of programming is figuring out
what’s wrong and how to fix it. When you’re programming, we really recommend following
the seven step process. This means you should plan how
to solve the problem before you start writing any code. The seven step process is important
because it gives you a method for solving problems. Then when you’ve figured out a solution,
you can start writing code. Once you’re ready to start
writing your programs, make sure you’ve read
the relevant documentation, so you know what Java methods exist and
how to use them. Refer back to the documentation
as often as you need to. Next, take advantage of the live coding
videos and the practice quizzes. For the live coding videos, this is a great opportunity to
program alongside the instructors. Finally, for the practice quizzes, even
though they don’t contribute to your final grade, there’s still a good chance for
you to test your code. Use the practice quizzes to find and
fix problems, before you move onto the graded quizzes. Finally, if you’re still having
trouble with your programs, ask for help from the instructor team and
your peers in the course discussion forum. Part of being a good programmer is
knowing how to ask for help effectively. We’ll talk more about
that in the next video.

It’s completely normal to struggle
with learning programming. And when that happens,
the instructor team and your peers in the courses
are here to help. The best way to ask for help is through the discussion forums,
which you can find here. You can also answer questions
in the discussion forums, and we really encourage that. Because explaining programming concepts
is a great way for you to learn and you also get to help out
one of your classmates. Here are some general tips about
asking questions in the forums. First, before you start a new topic, you should check the FAQ pages
on dukelearntoprogram.com and existing forum threads to see if your
question has already been answered there. The first thing you should do
when you have a question about a programming assignment or a quiz is
check the FAQ page for that course. Second, start a new thread
if you have a new question. Don’t post your question as a reply to an
existing thread unless it’s really closely related. This way, it’s easier for people to
see what your question is about and help you more quickly. Third, if you need to post code,
use the code formating box, which is the one with this symbol on. This is much easier to read
than if you just copy and paste it directly into the post. We also want to give you some tips
on writing a good question so that others can help you most easily. If you’re having trouble with
a programming assignment, name and link to the assignment you’re working on. If your program is throwing an exception,
you can post a screenshot of the error message and
also the line of code that it occurs at. If your program is producing a result
that’s different from what you expected, make sure you say what input
you’re running your code on, the output you expected to get,
and the output you actually got. For example, suppose I’m trying to write
a program to change every green pixel in an image to blue. I should share the image I am
running my program on, my input. I should explain that I’m expecting
every green pixel to become blue, my expected output. And I should also explain that every
green pixel is actually becoming red, my actual output. Then others in the forum can better
understand the problem I’m having. If you have to share some code because
others can’t help based on the description of what your program is doing,
it’s okay to share a few lines of code but don’t share your whole program. Figure out which part of your program
you think the error is in and share a few lines of that method. Don’t copy and
paste your whole program into your post. If you have a general
programming question, such as how do I write a for loop? Or, how do I add items to a list? It’s okay to post those lines of
codes because they’re so general. Finally, if you have a conceptual
question, make sure you name and link to any course materials you refer to. When you’re answering questions,
it’s okay to share to code for general programming concepts,
such as, how do I write a for loop? However, is someone is having a problem in
their code, don’t give them the solution. Try to guide them towards fixing their
code themselves by giving hints. If you don’t know what their problem is, suggest what they might do
next to debug their code. Let’s look at some example posts. In this post, I didn’t really ask for
help very well. I said my code wasn’t working and I asked
if anyone knew what might be wrong but I didn’t really explain what the code is
trying to do, what it’s actually doing, or what troubleshooting I tried so far. I also posted a lot of code. So I edited my post and
now it’s much better. You can see that I explained which
assignment I’m working on, and I provided a link to it. I also explained what happens when I
run my program, so in my actual output. And what should have happened when
I run it, so my expected output. Finally, I only posted a few lines of
code that I thought the problem was in. Now that you’ve learned how to ask and
answer questions about your code, you’re ready to start
learning how to program. I hope you enjoy the course. And I look forward to interacting
with you on the forums. Good luck.

Welcome back. Hopefully, you’re excited to start
learning how to create your own webpage in HTML. Before we dive into those details, we’re going to learn about a tool
that you can use to do this. This will let you follow along with
the examples as we go through things, and of course, explore and create as you want. You can play around and make your own webpages,
trying out the concepts that you learn. There are many possible tools that
we could use to make webpages, and we’re going to use one called codepen.io. Let’s see how you can use this tool. I’ve gone in my browser to codepen.io
which is the tool that you’ll be using to create a webpage. On this first page you can
see links to other people’s pens which is what they call projects and
you could go explore them if you wanted. What we’re going to do is go up
to the top and click New Pen, which lets you make your own project so
that you can make your own webpage. By default,
there are three frames at the top. We’re going to close the one on the right
because we’re not going to need that one. Which leaves you with one to make html and
one to make CSS. You’re going to learn about
HTML shortly and CSS later. If you were to write HTML
in this top frame, and you don’t have to worry about the fact
you haven’t learned that yet. You’ll learn it very soon. You would see as I type it,
it shows up in the bottom formatted as it would
on an actual webpage. Now as you learn later about CSS you’ll
be able to use it in this box on the right to change the style and
formatting of your webpages you created. So here I changed these list items
from black text to blue text. Of course this webpage
is not very interesting. You can make much more sophisticated web
pages as you’ll learn to do shortly, which have images and
more complicated formatting. Here’s one which has a lot of
HTML as well as a lot of CSS. And by the end of these
next couple modules, you’ll be able to do this to
design webpages as you want to. Now that you’ve seen codepen.io, you know how you can create
webpages once you know HTML. Now we’re ready to dive in and
learn HTML, so you can express anything
you want in a webpage.

Today, you’re going to start
learning about web pages. And the language and concepts for
creating your own web pages. One of the amazing things you
can do on the internet and the web is create things like web pages,
so that billions of people Anyone with an
internet and web connection can see them. Let’s get started in understanding and
mastering the concepts in language, the nuts and bolts of making a webpage,
so you can make your own webpage. You’re probably are quite familiar with
webpages, you’ve seen and navigated them. For example,
you may have looked at Wikipedia webpages. You’ve seen that some webpages
are easier to read than others. Some are full of really fun and interesting links, words,
images, videos and more. Here’s a Wikipedia webpage
that describes webpages. In the web page, is an image of a web
page, so we’re talking about a web page with a picture of a web page and
in that web page is information. Excitement. You’ll learn about the basics
in creating web pages. Your own imagination and creativity will help you apply this
knowledge in creating your own pages. For example, there is bold or
emphasized text on the web page. You’ll learn about how to make some
parts of the web page be more forceful than others. There are links to other
web pages on this web page. Links are what helped transform how
people use the internet and the web. Linking from one page to another so that you can learn amazing
things by following links. This web page has images. You can also put videos and
audios on a web page. But we’ll be looking at images first, since they’re very simple to access and
use. To access a particular web
page such as this one, you need the address of the web page. The address isn’t part of the web page,
it’s used to access the web page online. Once you share the address, anyone in
the world can access your web page. In this course, you’ll be creating web pages that you
can share with anyone in the world. The address is called a URL or
Uniform Resource Locator. In order to write webpages, you’re going
to learn HyperText Markup Language. This is the language
used to create webpages. Most people use HTML as an abbreviation
for HyperText Markup Language. It’s much easier to say and it’s easy to
use when searching for information online. Note then in learning HTML, you are not
learning a programming language but rather a markup language. HTML does not run on a computer
like a programming language, but is used by web browsers
to display a webpage. You may have written documents
in which you select text and make it bold or underlined or italics. This is a way of marking up the text
to display in certain ways. HTML uses structural marker called tags that the web browser uses
to display the webpage. When you write HTML, you get to describe what you want to
appear in the webpage you’re creating. The browser uses HTML to
render the web page so that it’s viewable on a computer or on
a phone or somewhere else a browser runs. Because HTML’s a markup language that
description includes not just the text and images, but
markup describing the formatting you want. For example, bold text, like you just saw,
tables like you will see in the next lesson, or a variety of
other ways to display information. You’ll use HTML to specify meaning,
like bold or link, but you won’t use HTML to specify how to
display bold text, like what color to use. For that, you’ll use another language,
one you will also study a little later. There are different ways to display items. You will later learn about CSS, to provide ways to enhance
the display of your web page. You may specify that you
want to emphasize some text. But how exactly do you
display emphasized text? CSS lets you describe that. Maybe it’s italics, maybe it’s bold,
maybe it’s huge and red. You’ll learn CSS in a later lesson. In order for different browsers to interpret HTML
on web pages, there must be standards. HTML 5 is the current version of HTML. It’s a collaborative standard, many people working around the world
to decide on the standards. The first standard for HTML was in 1993. Wow, that was over 20 years ago,
that was a very different time. Most people used very slow modems
to connect to the internet then. Web pages were much simpler then and
images were slow to load. Today we have images, video, audio and
more, but we still have an HTML standard. Just when that’s up to date with current
capabilities of the internet and the web. The most recent standard for
HTML was in 2014, and it has evolved with the changing times. HTML 5 has features to support multimedia
that would have been unimaginable in 1993. Here’s an example of HTML for
a webpage and that webpage display. You’ll see that the HTML
markup has many tags. Each tag is set off by angle brackets
from what’s between the tags. We’ll look at the tags
used on this page but you can also see that the displayed
webpage does not show the tags. I chose the phrase, Hello World and you can read the title of
the webpage in the browser tab. The title is, Hello World Page. First, you see the HTML tag to indicate we
are using HTML to define the components of a webpage. The webpage is defined between the
starting HTML tag and the ending HTML tag. All valid web pages using
HTML contains these tags. As we’ll see,
there is a start tag and an end tag. The tags match up, but the end tag has
a slash that indicates it’s the end tag. Next you see all the header information
defined between these start and ending head tag. Again, the end tag is /head and
the matching start tag is head. Next you see the title tag. Note that all the content
between the starting and ending title tag is displayed as the title
of the web page, Hello World Page. Next you see highlighted
the body tags of the page. Whatever content you put
between the start and ending body tags will be displayed
as the body of the web page. Finally, we see a short paragraph within
the starting and ending p tags and you can see that content,
Hello World is displayed in the web page. We’ll see this HTML often, which between the body tags is what
the user looking at the web page sees.

Which of the following are sectioning tags? Select all that are correct.

• <body>
• <h4>
• <div>

Let’s look more closely at some different
types of HTML tags, or elements. Right now we will look at
two types of elements. One group is Metadata elements. These contain information about the page. Examples include the tag,
, and tags. Sectioning elements which define regions<br /> of the page includes tags like <body>, <h1>, and <div>. In the context of a webpage Metadata<br /> is a set of data that describes information about a webpage<br /> the <html> tag is a Metadata Element. All other elements must be defined<br /> between the HTML start and ending tags. HTML tells a browser that it<br /> should use the HTML standard in displaying the web page. The <head> tag is also a Metadata Element it contains general<br /> information about the page. This includes the title<br /> Information about scripts and information about displaying<br /> the page using CSS. The <title> tag is a Metadata Element too. It specifies the text that is<br /> the title for the page and must be nested between the start and<br /> ending head tags. For an example here, is the beginning<br /> of the HTML from dukelearnprogram.com. The HTML tag, the head tags between which other Metadata goes<br /> such as the title tags. Next, we see examples<br /> of Sectioning Elements. The <body> tag is a Sectioning Element. The start and ending body tags define<br /> the body of the whole webpage. All the text and other items seen on<br /> the page will be inside the body tags. Other sectioning elements define<br /> sectioning within the body of the web page. For example, the <h1> tag defines<br /> a region with a more important and usually larger header. The h in <h1> means section head,<br /> the <h2> tag is also a section header, but typically a little<br /> smaller than an <h1> tag. The smallest header tag is h6. The <div> tag is also a sectioning tag. This tag defines a section or<br /> division of a web page. It is useful for grouping elements<br /> together to use CSS styling. Sectioning Elements can also be found<br /> in the HTML for dukelearntoprogram.com. The body starts here after the Metadata. And the closing body tag is not<br /> showing because there’s a lot of HTML on this page. Here is an <h1> header element,<br /> here is the first <div> on the page. It uses the CSS class title bar. Hopefully, the layout of a webpage’s<br /> HTML makes more sense now.</p>

We’ll see here how some simple style tags
change the appearance of text on a page. Here is an example using the bold tag. The b tag typically makes text bold or
standing out from other text. Notice that there is both a start and
end b tag. Here’s another example of bold. As we’ll see later, the bold text might be displayed
differently if you have trouble seeing. For example, if the web page is used
by a screen reader it’s a semantics, or meaning, and helps the screen reader
change how text is read to a blind user, for example. Here’s an example using the emphasize tag. And here is an example
nesting different tags. Let’s see how all of this would
be displayed on a web page. Notice that some of the words are bold and some of the words are emphasized
in a slanted text. These two lines
are displayed in bold text. And this line is displayed
using a slanted text. Look what happens when you nest tags. Here we have the bold tag nested
inside the emphasize tag. The outermost tag is the emphasize tag,
and the innermost tag is bold. The innermost tag applies to
the words example of nested. And the rest of the words inside emphasize
get emphasized with slanted text. You may be used to editing a Word
document where you type text. What you see is what you get. But with markup language,
what you see isn’t what you get. The HTML you write will be
displayed in a nicer way. The way you specify it to be displayed.

You can put images, video,
and audio on your web page. For example, here we have a picture of
Hillary Clinton welcoming Sonia Gandhi. Different types of media
have different tags, but we will show you how to use images since
they are the most straight forward. Anytime you want to put an image on
your web page, you use the image tag. Here is an example of an image tag,
to display a picture. And here is another example. The two of them look
slightly different and both have syntax that
we’ve not seen before. Inside the angle brackets for the image tags we have options which give
extra information about what we’re doing. In the example of an image tag,
we need to specify what image to display. In fact,
even though they are called options and thus sound optional,
some options are required. For example, we have to specify
what image we want to display so that option is required. Notice there is not a separate end tag. An image tag specifies the actual
image location in the tag, so it doesn’t need an end tag. It has the slash in this tag to indicate
an additional end tag is not needed. As we just said, you must specify
what image you want, so the source or src option, is required. It specifies the web address
to the image to load. Width is an optional tag. It can be used to reduce
the size of the image displayed. Otherwise, the original size of the image
is displayed which could be quite large. There are other options you can specify,
but we will see better ways to process
images when we get to CSS. Here we display HTML, that illustrates
how to link to another web page and below, we show how this HTML
is displayed in a browser. The anchor tag, or a tag, is used to
specify a link to another website. The href attributes specifies the URL for
that web page and is required. You must specify some text between
the start and end anchor tag. This text will be clickable to
take you to other web sites. Now, making a web page look
really good isn’t easy. Designers can make elegant web pages
because they understand HTML really well. Designers understand how to use
the tools to get those fancy web pages. Now you are learning the basics of HTML,
so you can get started on
creating simple web pages. You’re learning a foundation
that you can build on. Notice that web pages can be displayed
on different types of devices. Your laptop, your phone. It’s a bit more of a challenge to create a
web page that displays well on both large and small displays. Having interaction with a web
page such as ordering a book from Amazon’s web page is even more complex. For now, let’s get started with just
the basics so you can create a web page.

You are creating a website that has multiple images. Instead of saving the images and installing them on their own server you choose to create a link within your page with the URL of the original sever. This process is known as:

inline linking

In this lesson we’re going to
talk about a few concerns or issues that you may face when using images
or photos in the web pages you create. We’ve made web pages we’ve shared with you
and you’ve made web pages that use the img tag to show a picture, image or
photo on the web page you create. In this course, you’ve used the website or a web tool codepen.io
to create the images. But it’s possible you may have
already used other tools or sites like WordPress to create images. Whatever tool or site you use, you’ll need to find images that you
can use in the websites you create. A URL that is the source for
the tag you use in your website. In some cases, there may be concern
with the person, organization or group that created the photo you
display on a web page you create. The creator has certain rights. Called copyrights, and
you’ll want to respect these. In some cases,
there may be storage concerns. Where are the images stored that
you’ve included on your webpage? And who pays for that storage? You may want to store your own images so you can link to them in
webpages you create. There are similar concerns with videos,
though videos hosted on YouTube are very easy to include
in the webpages you create. We’ll briefly talk about usage rights for
images or photos you find online. We’ll give you a very basic understanding
and urge you to explore more on your own. Some images and photos are copyrighted. This means specific rights
are held by the person or organization that created the images. You should respect these rights, thinking
about rights you’d like to have for images you create. Copyright laws are different, and
vary from one country to another. You should likely have a basic
understanding of copyright in your own country. If you’re going to make webpages
that might have a commercial value. Typically, if you’re making a webpage for
personal use, like the pages you create for this course, you don’t need to
be concerned with copyright laws. However, you do want to understand
the usage rights and know that for images that are copyrighted,
there are some rights. Many images are in the public domain and
are not copyrighted. The flag from Brazil that has been
displayed on this page is in the public domain in the United States, in Brazil,
and in many other countries. Images in the public domain have
no rights associated with them and you can use them freely. Many images can be found
using Google image search and you can fine tune this search to specify
that you want images that can be reused. The Wikimedia commons is a website and storage area where images that
are more free to use can be found. Some of these images have what
are called creative commons licences. Which specify how you can use the images. Once again, for
your own personal web pages, you typically don’t need to be
concerned with these rights. But it’s still a good idea to have
a basic understanding of image rights. Some Creative Commons
images are not copyrighted. Some have usage rights that allow you to
re-use them for non commercial purposes. The logo on the right
specifies non-commercial use in the European Union or EU. Other licenses require that you license
your own work in a similar way. These are called share alike licenses. The logo on the left
represents such a license. In this course, we try to use images
that are in the public domain. In addition too usage rights, using images on web pages you create may
have image storage and hosting concerns. For example,
suppose you want to include an image of the Chinese flag on a web page you
create, you may use Google Image Search to find a URL that you can use with
the source argument of an IMG tag. And you may take steps to ensure that
the image of the flag you find is in the public domain, so
there are no usage rights concerns. The url shown here is for
just such an image. You’ve done great. You’ve properly concerned
about usage rights and you’ve created a really nice web page. But suppose one million
people view your web page. That means the flag image is
seen by one million people. It also means that the flag image is sent
from the website which stores it, across the Internet to one million users that
might be scattered all over the world. Someone pays for hosting the image and for serving it
to everyone, even if it’s not you. This could be a concern that
you need to understand. When you use a URL in a webpage
you create as part of an IMG tag you’ve included what’s called an inline
link from your page to another webpage. Inline linking is also called hot linking. It means that the image is
stored on another site but visually it appears in
the site you create. Typically you don’t need to worry
about copyright and usage concerns for your own personal pages. However, if you create a webpage with
lots of views, or lots of traffic, there may be storage costs or
server costs that might be a concern you should understand, though typically
it’s not something to worry about for the pages you create in the course,
or on your own for personal use. When you want to include
images in the pages you create it’s easy to use Google image
search to find images online. You’ll need to find the URL for the image
to use in the inline link for the img tag. You can typically find the URL by right
clicking, sometimes this is control click, when using a web browser like Chrome or
Firefox and then, copying the image URL and pasting it into the HTML
you’re creating for your own page. Some websites won’t allow you to
hot link to images stored on them. For example, pixabay hosts
many public domain images, but will not allow you to link to
them in the web pages you create. You should be sure to test the web
pages you create so that they work. You may use Incognito or private browsing to be sure that you
are behaving like an anonymous user, rather than being logged in as yourself,
for example, when looking at a web page. When you can, get someone else’s help
in viewing any web pages you create to be sure that they see the images.

Which HTML tag would you use to create a numbered list?

<ol></ol>

Which one of these is an example of nesting?

adding a list inside a list

You’ve already learned some basics of HTML
which lets you specify the contents of a web page that you want to make. You learned about metadata tags, such
as head and title and sectioning tags, such as body, h1 and h2. You learned about text content such as
the p tag which formats a paragraph. However, there’s much more that
you could do with HTML besides just put text into paragraphs. One way that you might want to
organize information is in lists. Or tables, which we will explore now. We use bulleted lists often
when presenting information. In fact, much of the content
of these video presentations presents information in that form. Here, you can see a screen screenshot
from a sample web page that organizes information into a bulleted list. This particular style of list
is called an unordered list, which you can create with the ul tag,
which stands for unordered list. Even though the list is called unordered, the content still appears in
the order that you specify it. It is just called unordered, because the labels are all
the same bullets by default. Later in this lesson, we will show you
how to create lists with numbered items. When you go on to learn about CSS,
you can change the style of the bullets. Now that you have the big idea, let us dive into the details of using
the UL tag to make unordered lists. Here’s the HTML for
the page we saw a second ago. if you look inside the ul tag which
corresponds to the actual bulleted list, you will see many li tags. Each li tag which stands for list items,
describes one item in the list. If we look at each of these li tags, we can see how they correspond to
the items that appear in the list. When you make lists, it is important
to know that you must place everything in the list inside li tags. All of the tags inside of the ul tag,
called the ul tag’s children, have to be li tags,
otherwise our HTML’s incorrect. However, inside the li tags we
can put much more than just text. We can put images, links,
or even another list. Okay, so you know about unordered lists. But sometimes you want an ordered list,
one that will number the items. If you wanted to describe your preferences
for your five favorite fruits for example you might want to number them. In such a situation numbering
is important as you want to indicate the ordering of the list. You can also have lists
which are ordered but labeled with letters instead of numbers. You can make these types of lists with the
ol tag, which stands for ordered list and works a lot like the ul tag. Much like the ul tag,
you specify the list items with li tag, which are the only type of tag you can
put as direct children of the ol tag. Of course as with the ul tag, you can put a lot of different kinds
of things inside of the li tag. The numbering for li tags is automatic. If you add or remove elements from your
HTML, the numbers will automatically adapt so that the elements are numbered 1,
2, 3, 4, and so on. We mentioned how you can put a variety of
types of elements inside of an li tag, letting you put images, links, or
nested lists inside of a list. We call putting these elements together,
composing them. Composition is an important
concept in computer science, and is common in design of languages, whether
they’re markup languages, like HTML, or programming languages Images like Java. This property lets you build large,
complex systems, whether web pages or programs, in a way that
you can understand. You can put small, easy to understand
pieces together to build larger, more complex things. In the case of web pages, we can put elements together to
get more sophisticated formatting. In most cases, you can compose elements
with each other however you want, although there are some rules. For example, you cannot put the title
tag inside of an unordered list because it does not make sense for
title of the page to be inside the list. The title tag can only go in the header. However, you can make a list of images or
a list of list. When you make a list of list. It is called a nested list. Nesting is another concept
in computer science. Which just refers to one of a thing
being inside of another of that thing. Here you are going to
learn about nested lists. Later when we delve into programming
you will learn about nested loops. The concept is the same a loop inside of
a loop, much like a list inside of a list. You can make a nested list such as this
one by placing a ul tag which describes the inner list inside of the li tag for
one of the items in the outer list. Notice how the bullets for the inner
list are different from the bullets for the outer list. As well as how the inner list
is indented more deeply. These features both
help whoever’s reading. The web page visually distinguished
the content in the outer and inner lists. As well as, when you write the HTML,
it is helpful to indent more deeply each time you put
one element inside of another. This structure helps you
visually distinguish what elements belong in the HTML, so
you can edit it more easily later. Notice how you can compose
the list items here. You just write the inner list with ul and
li just like you would do anywhere else. You do not have to do anything special. And that is an important
aspect of composition. You just put the pieces together and
they just work the same way everywhere. The HTML for this example is available
on codepen if you want to play with it after you finish watching this video. Another way you might want to organize
information in your HTML is with a table. Which let’s you arrange
things into rows and columns. For example you might want to
display some information about food based on what tastes
you associate with it. Sometimes, people will use tables for more general organization of
the contents of the page. But CSS, which we’ll learn about later,
is the very way to do that. You make a table with HTML elements
that match up with the visual structure of the table. Now, let us look in depth at the HTML elements that were used
to make this table. First, you write a table tag
at the start of the table, which has a matching end table
tag at the end of the table. Next, you write a tr tag, which stands for
table row, for each row of the table. As you can see here, each tr corresponds
to one row in the resulting table. Rows can either contain th tags which
specify header elements such as these. And td tags which specify the data for
non-header elements of the table. We have text inside of
our td tags here but do you think that you could put
other things inside of them? Sure, the principle of composition says
that you could put images, lists, or a variety of other things in
your table if you wanted to. Okay, so now you’ve seen HTML tables and lists which lets you organize
information from simple to complex. If you wanted, you could put
a table tag inside of an li tag or a list inside of a table. Isn’t composition great? You’re going to see it come up again, as
it is a key principal in computer science. And, it will help you as you create,
design, and build, whatever you want the computer to do for
you. Whether it is a webpage to show
off some cool information, or a program to compute something.

To ensure a good user experience, what should you do? Select all that apply.

• Think about the different devices users use to experience the web.
• Ensure pages load quickly.
• Ensure web pages are accessible.

Web Pages today are displayed and
experienced differently, depending on many criteria. The kind of device and screen affect
both how to display and what to display. Web Pages are often designed to
accommodate different users, with different abilities and disabilities. Users experience web pages differently. Some users are color blind,
some can’t see well, and some have a hard time
clicking on small links. Users may see web pages
on computer monitors. But today, many users are viewing the web on mobile
devices like smartphones and tablets. Web pages may even be
displayed on huge screens. Web designers must take users and devices
into account, when creating web pages. Even as you learn the basics of Web Page
creation and design, you can and should keep some things in mind
when you create a Web Page, working to make web pages accessible. You’ll do this by removing barriers, and to help make your web pages
accessible to everyone. Some people have trouble seeing certain
colors, some can’t see at all, and some have a hard time
manipulating a mouse. Users with poor eyesight may use
screen readers, to help view and experience a web page. Some colors and
some fonts are easier to read than others. Some alphabets require special
fonts to display well. If you develop more web pages, you’ll
want to ensure a Good User Experience. And this means that pages should
load quickly when that’s possible. We’ve already used HTML, or Hypertext Markup Language, to create web
pages that anyone in the world can see. HTML specifies the content of a document,
the words and the images that appear in a web page. Some formatting is specified with HTML. For example, different size headers are
indicated in HTML by h1 or h2 or h3 tags. Different kinds of lists
are indicated in HTML by using ol and ul tags for ordered and unordered lists. These display differently because
browsers interpret the HTML and change both headers and
lists to match the HTML markup. Tables are also formatted using HTML. As you’ve seen, with the many tags
that are used to build a table for displaying data and other information. Images are displayed using HTML. And you’ve seen that
the width of an HTML image or img tag, can be specified
using the width attribute or specifying the width using
a style addition to the HTML tag. These style and width modifications are example of
what’s called CSS to style a web page. CSS is an abbreviation, or an acronym,
for Cascading Style Sheets. CSS specifies the look and
formatting of a web page, where as HTML specifies the content. This allows web designers to separate
the content from how it’s presented. Which can accommodate different users and different display devices to make
sure that even in other countries, these can be displayed without
changing the content of the web page. For example, how big is an h1 header tag? What color should be used for
the text in an h1 header tag? Should the color or
size depend on the user and how the user has experienced the web page? And whether the user is
using a mobile device? These attributes of a tag can be
specified and changed using CSS. If you’re creating thousands of webpages
for a website, changing the color or font or the size of an HTML element
can be localized in one place, rather than repeated in a thousand places
which would make changes difficult. Design for scale is a key
part of computer science and one that CSS and
HTML together, make possible.

Now you’re going to learn
a bit more about CSS. Last time you learned, why you would want
to use CSS to separate the style of a web page from the content, which touched on
some major themes in computer science. One of those themes was reusability. You could describe a style once in CSS and
reuse it across multiple elements or even multiple web pages. Another of those themes
was maintainability. Being able to efficiently change
your web page in response to changing design requirements. Now that you have learned a bit about
why CSS is important, we are going to build on that and delve into how you
can write your own CSS to style a webpage. Before you learn what to write for CSS, we
are going to teach you where to write it. In CodePen you’ve been writing
HTML in the left pane. To the right is the CSS pane, which I have
highlighted with the blue square here. You can identify it by
the fact that it says, CSS in the top left corner of that pane. Also, don’t worry about the slightly
fancy CSS in this window, it makes a nice looking table but
you only need to learn the basics. If you are writing a webpage from
scratch without a tool like CodePen, you could include CSS by
either using the style tag and writing the CSS inside it or by using
the link tag to link to a style sheet. Either of these tags go in
the head portion of your HTML. We will start with the small
example webpage shown above, which describes some delicious foods. On the left,
you can see the webpage with no CSS. Notice how the header, drawn by h1 tag,
is in black text and left aligned. Now, supposing you wanted to
make that header blue and center, like the one on the right. This page on the right
has the same HTML but we have used CSS to change
the formatting of the h1 tag. Here is the CSS we used to style
the h1 tag to be blue and center. Let’s look at it in detail so you can write your own CSS to
style the pages however you want. The first thing you need
to write is the selector, the name of the element
that you want to style. In this case we want it to style h1 tags,
so we write h1 here. Next you write curly braces which surround
the style information you want to apply to the h1 tag. When you write and
open curly brace in CodePen, it will automatically put a close curly brace
after it and put your cursor between them. This behavior can be helpful, as you do
not have to remember to write the close curly brace after you finish
writing the style you want. On each line inside the curly braces, you first write the property, what aspect
of the styling you want to change. Here, we want to change
the text alignment, which has the property name text align. After the property name, you write a : followed by the value
you want to give that property. In this case,
we want to set text align to center. At the end of the line you write a ;, you can then write more
lines with the same syntax. For example, we have color: blue;
to set the color property to blue. There are many properties you can set in
CSS, we won’t go into all of them here but rather suggest you might read more
about them online, as you need them. As with many things,
you should not try to memorize them. Rather, look them up, as you need them. If you end up writing a lot of CSS, you’ll become familiar with
the properties that you use often. In your in-video quiz, you just thought about how this
CSS styles list items to be green. However, this CSS makes all list
items in your entire webpage green. What if you wanted to make
some of them green and style some of them a different way? We’re going to show you
three approaches to styling only some of a particular element. The first way you might do this
is to use a class, a named style. To use a CSS class, you need to
change your HTML by writing class=, and the name of the class you want
in the tags you want to style. Now, in your CSS, instead of writing
the name of HTML tag as a selector, write a dot,
followed by the name of the class. The dot specifies that
you are naming a class. Immediately after the dot, you should
write the name you want to give the class, this name can be pretty
much anything you want. It has to follows some rules,
like you can’t put braces or spaces in the name but
you can pick any word you want for a name. However, you should make
the name descriptive. In this example, we picked foodLi, since we’re using the class to style
list items that describe food. Would .green be a good name for
this class? Even though that describes how it
styles the list items right now, naming it .green is a not a great choice. If we later decided we wanted to style
our food list items to be purple, our style name would be misleading. Instead we’re better off naming it
based on the meaning of the parts of our page and
we want to style food list items. If you look back at the HTML,
now that you’ve seen the CSS, you can see where the name
we picked came from. It matches up with the class
name we picked in our CSS. Another way to style only some of a
particular element type, is to use an ID. An ID names one particular element. Notice the difference between a class,
which can be applied to many elements, and an ID,
which can only be applied to one element. In this example, the webpage has a picture of a cake, which
we want to style in a particular way. We have specified id?”cakeImg”
inside the img tag. Now in the CSS we can describe
the styling for cakeImg. Notice how the selector for
an ID starts with a # sign. The final way that we will mention,
but not go into depth on, is called combinators, these let you
specify relationships between tags. You might specify that you want to
style li’s that are inside of UL’s in a particular way. Which you could do by writing
ul li as the selector. There are more advanced relationships,
such as siblings. Combinators are a more advanced topic
which you do not need to know but we mention it for those of you
who want to explore a bit more. Classes and IDs both let you
name a way to style an element. Naming a style lets you
reuse that style as needed. In the case of a class, you can style
many elements on a page in the same way. For both names and classes, you can
reuse a style across multiple pages. For example, if you have a logo that
you want to display in the corner of every page on your site,
you can write a style for it once, and
re-use that style on every page. Naming and re-using is a common
theme in computer science. As you delve deeper into programming, you
will find that it is often useful to name things, constants, algorithms or
data, so that you can re-use them. Now you have seen the basics of CSS. You have learned where to write CSS in
CodePen, the basic syntax of CSS and how to make classes and
IDs to name and re-use styles.

How many standard color names does CSS support?

140

In the color value #001A57, which set of characters specifies the amount of blue?

57

In this lesson, you are going
to learn a bit more about CSS. In the last lesson you learned
the basics of CSS, its syntax, as well as how you can name
styles with classes and IDs. In this lesson you’re going to learn
a bit more about colors in CSS. In particular, you will learn that you
can specify them not only by name, but also by numeric values. An instance of an important concept
that you will learn in the next lesson that everything is a number for
a computer. Remember from last time that you
learned to style the h1 tags to be blue and centered. We use blue as the value for the property
color to achieve this styling. What if you wanted to use another color? We saw green in another example. So you could guess that you might be able
to use a variety of basic colors such as red and yellow, and you would be right. But you might want to design a webpage
with more sophisticated color choices. CSS supports a much wider
variety of color names. Giving you the ability to choose some
nice shades of different colors, here’s a few of my favorites. BlueViolet is a nice shade of purple,
gold is of course gold colored. Light Blue Steel is a nice bluish-gray,
and Fire Brick is a deep red. In fact there are 140 standard
color names giving you a wide selection of colors to
choose from by name. How could you remember them all? As with many other things nobody
memorizes these sorts of things. Instead what’s important is knowing
how to look up what you need. You can find websites, such as this one, which will show you the various colors,
as well as their names. However, even 140 colors is not a lot. What if you wanted some other shade of a
color that does not have a standard name? It seems like we might want more colors,
but how many would we need? Humans can perceive literally
millions of colors. For example, we have here 12 very
suddenly different shades of blue, ranging from very dark on the left,
to a medium light blue on the right. These are just a few shades of blue, and one of them is a very
important shade of blue. This bar in the middle is Duke Blue. Of course,
there’s many more shades of blue, and many more shades of other colors, too. So how could we handle millions of colors? Giving them all names would
be somewhat unmanageable. One problem is that someone would have
to come up with millions of color names, and standardize them. Another problem is that you would have
to look through millions of names to find the color that you want. Limiting the selection of available
colors is not a very appealing option. If you really want a particular color, such as exactly Duke Blue, you would
be unhappy if you could not get it. Another option would be to give each color
a number which is what is actually done. In fact as you would learn later, for
a computer, everything is a number so this choice is actually a natural
way to handle millions of colors. The way that colors work as numbers
is that they are specified by a combination of how much red,
green, and blue they have. With each component taking
a value between zero and 255. This scheme is sufficient
to specify about 16 million colors,
which is more than humans can distinguish. in CSS you can specify color by specifying
it’s red, green, and blue components. By writing rgb and then in open parentheses followed by
the numerical value for red, green, and blue each separated by a comma,
then a closed parentheses. This syntax takes the red,
green, and blue numbers and then combines them into a single
numerical value for you. Each of the colors we saw before has their
rgb values written on top of them here. You could also specify a color by its
entire numerical value by writing a pound side valued by six hexadecimal digits. Hexadecimal means base 16, so
each digit has a value from zero to 15. Hexadecimal is convenient to
write rgb values since each color has 256 possible values,
meaning exactly two hexadecimal digits. The left two digits,
here, specify the red. The middle two digits specify the green,
and the right two digits specify the blue. You do not need to be able to convert
to and from hexadecimal, but for those who are curious we
will take a closer look. Your use to base 10 numbers where
each place is 10 times the previous. You have the 1’s, the 10’s and
100’s places and so on. In hexadecimal each place
is 16 times the previous. So you have the 1’s, the 16’s,
256’s, place and so on. If we look at the two digits for each
color we have the ones and 16’s places. The red of this color is 8A,
which is 8 in the 16’s place plus A, which is 10 in the 1’s place,
that makes 138. For the green you get 2 in the 16’s place. Plus B, which is 11 in the 1’s place,
which makes 43. For blue you have E which
is 14 in the 16’s place, and two in the 1’s place, which makes 226. Many people find it easier to
choose colors graphically and let a tool give them the number. Let us see an example of this
with Mozilla’s color picker. This is the color picker
tool available from Mozilla. You can see the URL of this tool at
the top of the web browser here. But you can also find the link to it and
the reading that goes with this lesson. As we look down at the main
part of this tool, you will see it has a colored box and
a colored slider. Moving the slider around,
adjusts the hue of the color. You can see red, yellow,
green, blue, purple, and red. Maybe you want a shade of say purple. You can then adjust the specific
shade in the box on the left. You can get grayer, or
brighter, or lighter, or darker, I’m going to pick this color. Once you find the color you want, this tool displays the numeric
information to the right. For this shade of purple, the red is 232,
the green is 73, and the blue is 227. You can also read the entire hexidecimal
number from the box on the bottom. It’s E849E3. There’s some more advanced features,
such as alpha, which lets you adjust transparency
in case you are layering objects. If you wanted to use that, this other slider would let
you change the transparency. The tool also shows HSL, which is just
a different way to represent colors as numbers, but we wont worry about that. So if you want to pick
a specific color graphically, a tool like this can be really great. That concludes our lesson on colors and
CSS. You have learned that there
are many standard names, which you can look up when you need them. And that you can specify millions
of color by numerical values, either by writing rgb and the red,
green, and blue values that you want. Or by writing a pound sign and the
hexidecimal value of the color’s number. We also saw a color picker tool,
which lets you look for the color you want to use. And then gives you the numerical values
for that color to write in your CSS.