HTML Course

Course Outline Part 1
This course is divided into four parts. Here's a brief outline so you'll know what
to expect:
1. The Web and HTML

In this lesson, we'll be exploring how to create web pages---and, along the
way, you'll learn some important concepts about how computer languages
work more generally.
2. Lab: Basic HTML Page

In this lab, you'll demonstrate your understanding of HTML basics by turning
your notes from the lesson into a simple---but fully functional---web page.
3. Intro to CSS
By the time you get to this lesson, you'll know how to create a web page—but
only a simply and somewhat boring one. So in this lesson, we'll learn how to
add style to a web page through the use of Cascading Style Sheets (CSS).
4. Project: Animal Trading Cards

Finally, you'll bring your combine knowledge of HTML and CSS together to
create a web-based trading card depicting your favorite animal. This will
demonstrate all the core skills you need to create a fully styled web page.
What is WEB?
 The WEB is a collection of documents written in HTML,
 Along with other resources such as images and videos.
 Everything that you can access using your browser is part
of the WEB,
 Those resources are spread out thousand and thousands
of different computers.
 The WEB is a hyper text system.
 Hypertext is a form of in which documents can refer (link)
to other documents and resources.
 Hyper text means that can have references (such as links)
to other documents and resources.
 Servers are just computers.
 Servers are not fundamentally different from the one you
are using right now, but they have programs running on
them that answers a browser’s request.
 The HTML is the language that provides the structure and
text of web pages.
 A browser get web pages by communicating with servers
over the internet.
 Servers are computers that have programs running on
them which answer a browser’s requests.
 Syntax. Grammar rules of a computer language.
 Formalism. Computers take code literally, and will only do
exactly what you tell it to do.
 Nesting. Bits of code going inside other bits of code in an
orderly way.
 There's a lot of help! Make sure to use tools like
documentation, or your favorite search engine if you need
to.
 Text files contain
 Text files contain: Letters, Numbers, Symbols, Spaces
 They don’t have bold, italics, color or images or videos
inside them.
 HTML is written in text
 The layout of a web page seen by the user is put together
by the web browser based on the code in the text file.
 HTML documents are building blocks of life.
 HTML is made up of text that the user will actually read in a
browser.
 Markup, which tells the browser what the text look like, or
how it’s arranged. And within markup, there can be...
 References to include other documents and files like images
and videos.
an em is stands for emphasis, that means It’s displayed
in italics.
Markup is a text that have a special meaning.
 Markup tells the web browser how to display content
on a webpage.
 markup is typically made up of elements, which consist
of tags that define the start and end of the content.
 Whitespace includes spaces, tabs, and line breaks. When the
browser displays an HTML file, it treats a run of whitespace
as a single space character. In order to create a line break
that will show up in the browser, use the <br> tag.
 P stands for paragraph and it’s a regular tag.
ELEMENTS REVIEW (PART 1)

Here are the HTML elements that you've seen so far in this
course.
 <em> and <strong> — Emphasis.
 By default, text inside <em> is displayed as italic, and
text in <strong> is displayed as boldface.
 <p> — Paragraph.
 Text in a paragraph is separated visually from other
paragraphs by a small margin.
 <br> — Line break. (empty)
 A line break does not create a new paragraph; it only
marks the end of a line.
 <sub> and <sup> — Subscript and superscript.
 Useful for math and chemistry: I have x3+2x2
molecules of H2O.
 <mark> — Highlighting.
 Not very often used, but it's kind of cool. Cool is
marked
Of these elements, the br element is the only one that is an

empty (or void) element.
 <p> - paragraph  <br> - line break

 <ol>, <ul> - list  <em>, <strong> - emphasis
 <h1>, <h2> - headlines  <mark> - highlighting
 <video> - video player  <a> - hypertext link
 <div> - generic block  <img> - image
 <table> - table element  <span> - generic inline
 A web address is called a Uniform Resource Locator.
 Uniform standardized
 Resource a file or other data object
 Locator address for finding something.
 HTTP, HTTPS, FILE are all protocols, or ways that the browser
can get something.
 After the protocol, We always see a colon, slash, slash, what
separates the protocol from the next part.
 For web URLs, the next part that you’ll see is a domain name.
This tells the browser what server to connect to.
 File URLs won’t have a domain name, because there is no
server. It’s just a browser reading off of your own computer.
 The element for making link is called <a>, it’s not called link,
it’s called <a>.
 <a> stands for anchor, because an <a> element anchors an
address to a piece of text on the page.
 There a couple things we need an <a>to include in order to
make a link. The text that the user clicks on follow the link,
and the URL of the page we’re linking to.
 The opening tag for the <a> element has this extra little bit in
it that we haven’t seen in HTML tags before.
 <a href=’’http://example.net”>The example page</a>
written in red, dark blue and green is a HTML attribute.
Written in green is an attribute name. and written in red is
the value of attribute
 The name href stands for Hypertext Reference, and it used
with <a> and a few other tags that link to another document.
 You won’t ever see href on a paragraph or an emphasis tag
or something else.
 <a> element is an inline element
 Then, there’s the contents of <a> element, which becomes
the text that appears on the page. Then there’s the closing
<a> tag. See the example above.
ADDING IMAGES
 Element for image is <img>, and works a lot like the a
element for links but with some important differences.
 The <a> element for links uses single attribute named href
whose value is the URL of the page you want to link it to, but
 The <img> element uses two attributes; src and alt.
 <img src=”https://encrypted-tbn0.gstatic.com/images”
<alt=”beautiful nature photos” >
 The text that’s shows up here is usually called alt text.
 Src stand for source and it’s the URL of the image that you
want to appear in your own webpage.
 And alt stand for alternate it’s text dicription of that image.
 You need to include both of those attributes when you write
HTML.
 The src attribute is there to tell the browser where to get the
image from, what is the source of the image.
 The alt attribute is there to tell the browser what text to
show if it can’t display the image. For instance, the alt text
will be displayed if the file is missing from the server or if the
users network connections stops working before that image
can be loaded which is really common on mobile for
instances.
 The <img> element is an inline element

HTML Course

Uploaded by

Copyright:

Available Formats

HTML Course

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Course

Uploaded by

Copyright:

Available Formats

Course Outline Part 1

1. The Web and HTML

2. Lab: Basic HTML Page

4. Project: Animal Trading Cards

 P stands for paragraph and it’s a regular tag.

ELEMENTS REVIEW (PART 1)

Of these elements, the br element is the only one that is an

 <p> - paragraph  <br> - line break

You might also like