Course 2: intro to HTML

 A browser gets 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.
 Text files contain:
 Letters
 Numbers
 Symbols
 Spaces There are no bold faces, images and etc.

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
 Each text editor has its own features like:
 Syntax highlighting
 Line numbers
 Make sure you're using a text editor and not a word processor. They
can add information to files on how to format text where as a text editor
edits plain text files.
 When writing HTML, make sure to use the extension .html on your file
name. An example would be [Link].
 You can open the file in the browser.
 If you want to see a change in the browser that was made in the HTML
file, you need to save the HTML file and refresh the browser

Markup: Text that has a special meaning. It tells the browser to do sth.
Every element starts and ends with a tag.

Example: <em>Hi there!</em>

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.
 Sup and Sub are used to put a text in them a superscript and subscript.

Here are the HTML elements that you've seen so far in this course. If you
haven't tried them out yet in your own text editor and browser, this is a great
time to do it!

 <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 x +2x molecules of H O.
3 2
2

 <mark> — Highlighting.
Not very often used, but it's kind of cool.

Of these elements, the br element is the only one that is an empty (or void)
element.

As you just discovered, the h1 element can be used for headlines,

or section headings. There are actually six of these heading
elements: h1 through h6.
h1 is used for the main heading on a page, while the rest are used for
subheadings. We use a smaller heading to show that one section
is inside another section.

In contrast, if one section simply comes after the other then we use the same
level of heading.

Margin Around Heading Elements

Something else you might notice about the above examples is that, like with
the p element, heading elements create a little bit of space (margin) around
themselves.
 The div Element
The div is short for division, because that's what this element is for—you can
use it to divide up the page into different sections.

Like the paragraph p element, the division div element has an invisible box
around it—and just like p, it can have a border, a margin, a width, a height,
and so on.

But a p element is specifically meant to contain text. In contrast,

the div element is a generic container for whatever other elements you might
want to put inside. You can use the div element to organize the content and
divide the page into sections.

The div element is a super important one, and it's used a lot in HTML to help lay out and
organize pages. We aren't going to use the div element much in this lesson, but we'll be
coming back to it in the next lesson—so keep it in mind!

Note: Pay attention to the fact that the closing tag is optional for li, but not optional
for ol and ul. In other words, a closing tag is optional for each list item, but not for the list as a
whole. We must be sure to close the list as a whole! Why? Because if we leave off the
closing </ol> or </ul>, then the browser will not know when our list ends! It will simply treat
everything that comes after that point as part of the list.

MAKING LISTS

You may have noticed that in the provided HTML code, we are
adding type="a" to <ol> elements to specify that the ordered lists should use
lowercase letters instead of the default numerical ordering (just like in the
example at the top of this page).

The type attribute for <ol> offers several options for list item markers:

 "1" for numbers (the default)

 "A" for uppercase letters
 "a" for lowercase letters
 "I" for uppercase Roman numerals
 "i" for lowercase Roman numerals

Note: There isn't a single "correct" way that you have to use when indenting your HTML code—
and different people often have somewhat different opinions on what to indent when.
 WEB Address
Difference Between HTTP and HTTPS

HTTP (HyperText Transfer Protocol) and HTTPS (HyperText Transfer Protocol Secure) are
protocols used for transferring data over the web. While they serve similar purposes, there are key
differences between them, primarily in terms of security.
HTTP

HTTP is a protocol used for transferring hypertext over the web. It operates at the application layer
and is stateless, meaning each transaction is independent of others. HTTP is simple and widely
used, but it is not secure. Data transferred using HTTP is in plain text, making it vulnerable to
interception by anyone between the browser and the server1.
Advantages of HTTP
 Reduced CPU and memory utilization: Fewer connections running at once.
 Pipelining: Allows requests and answers to be pipelined.
 Less network congestion: Fewer TCP connections.
 Lower latency: No handshaking required for subsequent requests1.
Disadvantages of HTTP
 Security: Data is transferred in plain text, making it insecure.
 Not mobile-friendly: Limited applicability to mobile connections.
 No encryption: Data is not encrypted, making it vulnerable to interception1.
HTTPS

HTTPS is an extended version of HTTP that includes encryption using Transport Layer Security
(TLS) or Secure Sockets Layer (SSL). This encryption ensures that data transferred between the
browser and the server is secure and cannot be easily intercepted1.
Advantages of HTTPS
 Data security: Encrypts data in transit, protecting it from interception.
 Trust: Increases visitors' trust in your website.
 SEO benefits: Helps improve search engine ranking.
 Protection: Shields against data breaches, phishing, and MITM attacks12.
Disadvantages of HTTPS
 Cost: Requires purchasing an SSL certificate, which needs to be renewed annually.
 Performance: Encrypting and decrypting data requires more computation.
 Caching issues: Some information may not be cached over HTTPS1.
Key Differences

 Security: HTTP is not secure, while HTTPS is secure due to encryption.

 Port numbers: HTTP uses port 80, while HTTPS uses port 443.
 Data transfer: HTTP transfers data in plain text, while HTTPS transfers data in ciphertext.
 Certificates: HTTP does not require certificates, while HTTPS requires SSL/TLS certificates 12.
In conclusion, while HTTP is suitable for transferring non-sensitive data, HTTPS is preferred for
secure communication, especially when handling sensitive information like login credentials and
payment details. Switching to HTTPS not only enhances security but also improves trust and SEO
ranking.

As Kelly noted at the end of the video: When you're linking to the top page (or
home page) of a site, the URL does not need a file path after the domain
name—so you will just see a single slash at the end of the address:

[Link]
And often this slash will be omitted altogether:

[Link]
This would still be considered a fully-qualified URL.

In contrast, if we look at the URL for a file on your local system, we must give
the file path—in fact, most of the URL is the file path:

[Link]
If we took away the file path from the above, we would just have:

file://
Which is definitely not a fully qualified URL.

[Link] is a fully qualified URL that takes you to the main

page of a web site.

[Link] is not a fully qualified URL. It's something you can type into your
browser, but you can't use it in HTML … unless what you meant was "a file
called [Link] in the same directory as this HTML file", which you probably
didn't.

is a mess! It's an http URL, but it doesn't have a

[Link]
domain name on it. The browser won't know what to do with this since it's http,
but there's no server to connect to!

And [Link] is a perfectly fine file URL for referring to

a file on your own computer ... if you happen to be Kelly on a Linux computer.
But keep in mind, if you give a file:// URL to someone else, they probably can't
access it because they don't have that file in the exact same location.
The a element is an inline element. It doesn't create a box on the page. Links normally
have the appearance of a specially highlighted piece of text.

ADDING IMAGES

Images significantly enhance the web's appeal, featuring everything from cat
pictures to maps and advertisements. The img element in HTML, equipped
with src (source URL) and alt (text description) attributes enable the inclusion
of these visuals in web pages. The alt attribute is crucial for accessibility,
describing when images fail to load due to network issues, are missing, or
when assisting visually impaired users with screen readers.

The img element points the browser to an image's location without embedding
the file into the HTML document, functioning as an empty element with no
closing tag. It integrates directly into the text, influencing layout based on its
size. This setup underscores the importance of thoughtfully using images in
web design to ensure aesthetic appeal and accessibility.

What about accessibility?

Alt text is essential for web accessibility, enabling screen readers to describe
images to users who are blind or have visual impairments, and ensuring
content is accessible when images cannot load or for those using text-based
browsers. It also supports users with cognitive disabilities and improves SEO
by giving search engines context for images.

THE DOCTYPE tag:

The DOCTYPE tag is very essential tag in writing by using HTML. It helps the
browser to identify which type of HTML we are writing in. Because it is being
used in the modern version. It is marked in the file as:
<!DOCTYPE html>

Are head and body required?

In one sense, no, but in another sense, yes.

The grammar of HTML does not require that you literally write
a <head> or <body> tag in your HTML code. Many web developers do write
these. However, if you don't, the browser will attempt to place them into your
code itself.

It needs to put the head element around certain elements that belong there,
such as title; and to put the body element around the elements that form the
document's body. This means that all the head elements must appear first, and
the body elements after.

Validating HTML

Errors

 Severity: Errors are critical issues that must be fixed before proceeding.
They prevent the system, application, or process from continuing until
resolved.
 Impact: An error indicates that something is fundamentally wrong. It
typically prevents the code, form, or data from functioning or being
processed as intended.

Warnings

 Severity: Warnings are less severe than errors. They indicate that
something may not be ideal, but it doesn’t necessarily prevent the process
from continuing.
 Impact: Warnings often highlight potential issues that could cause
problems down the line or indicate something that doesn’t fully conform to
best practices, but they don't stop execution.