ADOBE DREAMWEAVER,

HTML & CSS

HTML BASICS
 LEARNING OBJECTIVES

1. Understand the fundamentals of HTML (Hypertext Markup Language) and its role in web
development.
2. Learn how to create and structure HTML documents using Dreamweaver's visual tools and
code editor.
3. Explore basic HTML elements such as headings, paragraphs, lists, links, and images.
4. Gain proficiency in using Dreamweaver's features to format text, add images, and create
hyperlinks in HTML.
5. Practice creating simple web pages using HTML in Dreamweaver.
6. Learn best practices for organizing and commenting HTML code for readability and
maintainability.
HTML is the backbone of the web, the skeleton of your webpage. It is the structure and substance of
the Internet, although it is usually unseen except by the web designer. Without it, the web would not
exist. Dreamweaver has many features that help you access, create, and edit HTML code quickly
and effectively.

What is HTML?

“What other programs can open a Dreamweaver file?” asked a student in my Dreamweaver class.
Although it might seem obvious to an experienced developer, it illustrates a basic problem in
teaching and learning web design. Most people confuse the program with the technology. Some
may assume that the extension .htm or .html belongs to Dreamweaver or Adobe. This isn’t as unusual
as it seems. Print designers are used to working with files ending with extensions, such as .ai, .psd,
.indd, and so on; it’s just a part of their jobs. They have learned over time that opening these file
formats in a different program may produce unacceptable results or even damage the file.

On the other hand, the goal of the web designer is to create a webpage for display in a browser.
The power or functionality of the originating program has little bearing on the resulting browser
display, because the display is all contingent on the HTML code and how the browser interprets it.
Although a program may write good or bad code, it’s the browser that does all the hard work.
The web is based primarily on HyperText Markup Language (HTML). The language and the file
format don’t belong to any individual program or company. In fact, it is a non-proprietary,
plain-text language that can be edited in any text editor, on any operating system, on any
computer. Dreamweaver is, in part, an HTML editor, although it is also much more than this. But
to maximize the potential of Dreamweaver, it’s vital that you have a good understanding of
what HTML is and what it can (and can’t) do. This lesson is intended as a concise primer on
HTML and its capabilities. It will be a helpful foundation for understanding Dreamweaver.

Where did HTML begin?

HTML and the first browser were invented in 1989 by Tim Berners-Lee, a computer scientist
working at the CERN (Conseil Européen pour la Recherche Nucléaire, which is French for
European Council for Nuclear Research) particle physics laboratory in Geneva, Switzerland. He
intended the technology as a means for sharing technical papers and information via the
fledgling Internet that existed at the time. He shared his HTML and browser inventions openly as
an attempt to get the scientific community at large and others to adopt them and engage in
the development themselves. The fact that he did not copyright or try to sell his work started a
trend for openness and camaraderie on the web that continues to this day.
The language that Berners-Lee created over 25 years ago was a much simpler construct of
what we use now, but HTML is still surprisingly easy to learn and master. At the time of this
writing, HTML is now at version 5, officially adopted as of October 2014. It consists of over 120
tags, such as html, head, body, h1, p, and so on.

The tag is inserted between less-than (<) and greater-than (>) angle brackets, as in <p>, <h1>,
and <table>. These tags are used to identify, or mark up, text and graphics to signal the
browser to display them in a particular way. HTML code is considered properly balanced when
the markup features both an opening (<...>) and a closing (</...>) tag, such as <h1> . . . </h1>.

When two matching tags appear this way, they are referred to as an element; an element
encompasses any contents contained within the two tags, as well. Empty, or void, elements, like
the horizontal rule, can be written in an abbreviated fashion using only one tag, such as <hr/>,
essentially opening and closing the tag at the same time. In HTML5, empty elements can also be
validly expressed without the closing slash, such as <hr>. Some web applications require the
closing slash, so it’s a good idea to check before using one form over the other.
Some elements are used to create page structures, others to structure and format text, and yet others
to enable interactivity and programmability. Even though Dreamweaver obviates the need for writing
most of the code manually, the ability to read and interpret HTML code is still a recommended skill for
any burgeoning web designer. Sometimes it’s the only way to find an error in your webpage. The
ability to read and understand code may also become an essential skill in other fields as more
information and content is created and disseminated via mobile devices and internet-based
resources.

Basic HTML code structure

Here you see the basic structure of a webpage:

You may be surprised to learn that the only text from all this code that displays in the web
browser is “Welcome to my first webpage.” The rest of the code creates the page structure and
text formatting. Like an iceberg, most of the content of the actual webpage remains out of
sight.

Frequently used HTML elements

HTML code elements serve specific purposes. Tags can create distinct objects, apply
formatting, identify content semantically, or generate interactivity. Tags that make their own
space on the screen and stand alone are known as block elements; the ones that perform their
duties within the flow of another tag are known as inline elements. Some elements can also be
used to create structural relationships within a page, like stacking content in vertical columns or
collecting several elements together in logical groupings. Structural elements can behave like
block or inline elements or do their work entirely invisible to the user.

HTML tags
The image shows some of the most frequently used HTML tags. To get the most out of
Dreamweaver and your webpages, it helps to understand the nature of these elements and how
they are used. Remember that some tags can serve multiple purposes.
HTML character entities

Text content is normally entered via a computer keyboard. But many characters don’t appear
on a typical 101-key input device. If a symbol can’t be entered directly from the keyboard, it
can be inserted within the HTML code by typing the name or numeric value referred to as an
entity. Entities exist for every letter and character that can be displayed. Some popular entities
are listed in the image below.
What’s new in HTML5

Every new version of HTML has made changes to both the number and the purpose of the tags
that make up the language. HTML 4.01 consisted of approximately 90 tags. HTML5 has removed
some HTML 4 tags from its specification altogether, and some new ones have been adopted or
proposed.

Changes to the list usually revolve around supporting new technologies or different types of
content models, as well as removing features that were bad ideas or ones infrequently used.
Some changes simply reflect customs or techniques that have been popularized within the
developer community over time. Other changes have been made to simplify the way code is
created, to make it easier to write and faster to disseminate.
HTML5 tags

The image shows some of the important new tags in HTML5. The specification features nearly 50
new tags in total, while at least 30 old tags were deprecated. As we move through the
exercises of this module, you will learn how to use many of these new HTML5 tags, as
appropriate, to help you understand their intended role on the web. Take a few moments to
familiarize yourself with these tags and their descriptions.
Semantic web design

Many of the changes to HTML were made to support the concept of semantic web design. This
movement has important ramifications for the future of HTML, its usability, and the interoperability of
websites on the Internet. At the moment, each webpage stands alone on the web. The content may link
to other pages and sites, but there’s really no way to combine or collect the information available on
multiple pages or multiple sites in a coherent manner. Search engines do their best to index the content
that appears on every site, but much of it is lost due to the nature and structure of old HTML code.

HTML was initially designed as a presentation language. In other words, it was intended to display
technical documents in a browser in a readable and predictable manner. If you look carefully at the
original specifications of HTML, it looks like a list of items you would put in a college term paper:
headings, paragraphs, quotations, tables, numbered and bulleted lists, and so on.

The element list in the first version of HTML basically identified how the content would be displayed.
These tags did not convey any intrinsic meaning or significance. For example, using a heading tag
displayed a particular line of text in bold, but it didn’t tell you what relationship or importance the
heading had to the following text or to the story as a whole. Is it a title or merely a subheading?
HTML5 has added a significant number of new tags to help us add semantic meaning to our
markup. Tags such as <header>, <footer>, <article>, and <section> allow you for the first time to
identify specific content without having to resort to additional attributes. The
result is simpler code and less of it. But most of all, the addition of semantic meaning to your code
allows you and other developers to connect the content from one page to another in new and exciting
ways—many of which haven’t even been invented yet. It’s truly a work in progress.

New techniques and technology

HTML5 has also revisited the basic nature of the language to take back some of the functions that over
the years have been increasingly handled by third-party plug-in applications and programming.
If you are new to web design, this transition will be painless because you have nothing to relearn, no
bad habits to break. If you already have experience building webpages and applications, this book
will guide you safely through some of these waters and introduce the new technologies and techniques
in a logical and straightforward method. But either way, you don’t have to trash all your old sites and
rebuild everything from scratch.
Valid HTML 4 code will remain valid for the foreseeable future. HTML5 was intended to make web
design easier by allowing you to do more with less work.
WRITING YOUR OWN HTML
CODE
Writing code may sound difficult or at least tedious, but creating a webpage is actually much easier
than you think. In the next few exercises, you will learn how HTML works by creating a basic webpage
and adding and formatting simple text content.

1. Launch Notepad (Windows) or TextEdit (Mac).

2. Enter the following code in the empty document window:
<html>
<body>
Welcome to my first webpage
</body>
</html>
3. Save the file to the lesson02bonus folder as myfirstpage.html.
4. Launch Chrome, Firefox, Internet Explorer, Safari, or another installed web browser.
5. Open myfirstpage.html in the browser.

Arrange the two programs so you can see the code in the text editor side by side with the display in
the browser.

Congratulations! You just created your first webpage. As you can see, it doesn’t take much code to
create a serviceable webpage.
Understanding HTML syntax

Next, you’ll add content to your new webpage to learn some important aspects of HTML code syntax.

1.Switch back to the text editor, but don’t close the browser.
2. Insert your cursor at the end of the text “Welcome to my first webpage” and press Enter/Return to
insert a paragraph return.
3. Type Making webpages is fun on the new line.
Press the spacebar five times to insert five spaces.
Finish by typing and easy! on the same line.
4. Save the file.
5. Switch to the browser.

Although you saved the changes, you’ll notice that the new text doesn’t appear in the browser. That’s
because you never see a webpage “live” on the Internet. It must first be downloaded to your computer
and saved, or cached, on the hard drive. The browser is actually displaying the page that it
downloaded originally. To see the latest version of the webpage, you’ll have to reload it.
This is important to remember as a web designer. People frequently miss changes in a website because
they are looking at the cached versions of a page instead of the most current version.

6. Refresh the window to load the updated page.

As you can see, the browser is displaying the new text, but it’s ignoring the paragraph return between
the two lines as well as the extra spaces. In fact, you could add hundreds of paragraph returns
between the lines and dozens of spaces between each word, and the browser display would be no
different. That’s because the browser is programmed to ignore extra whitespace and honor only HTML
code elements. By inserting a tag here and there, you can easily create the desired text display.
Inserting HTML code

In this exercise, you will insert HTML tags to produce the correct text display.

1. Switch back to the text editor.

2. Add the highlighted tags to the text as follows:
<p> Making webpages is fun and easy!</p>

To add extra spacing or other special characters within a line of text, HTML provides code elements
known as entities. Entities are entered into the code differently than tags. For
example, the method for inserting a nonbreaking space is to type the &nbsp; entity.

3. Replace the five spaces in the text with five nonbreaking spaces so the code looks like the following
sample:
<p>Making webpages is fun&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; and easy!</p>

4. Save the file. Switch to the browser and reload or refresh the page display.
The browser is now showing the paragraph return and the desired spacing.

Because you added the tags and entities, the browser can display the paragraph structure and
spacing exactly as desired.

Although line breaks, extra spacing, and even indentation are ignored by the browser, web designers
and coders frequently add such whitespace to make the code easier to read and edit.

But don’t go crazy. Although whitespace doesn’t affect the display of a page in a browser, it can
contribute to the time it takes to download and render a webpage overall. Whitespace and
extraneous code contribute to what web developers call the overall weight of a page. When a page
has too much weight, it downloads, renders, and operates more slowly than it should.
Formatting text with HTML

Tags often serve multiple purposes. Besides creating paragraph structures and creating whitespace, as
demonstrated earlier, tags can impart basic text formatting, as well as identify the relative importance
of the page content.

For example, HTML provides six heading tags (<h1> to <h6>) that you can use to set headings off from
normal paragraph text. Not only do the tags format the heading text differently than the
paragraph text, but they also impart additional meaning. Heading tags are automatically formatted in
bold and often at a larger relative size. The number of the heading (1 through 6) also
plays a role. Using the <h1> tag identifies the heading as being the highest in importance for search
engines and other applications. The other headings are given less importance in
descending order.

In this exercise, you will add a heading tag to the first line.
1. Switch back to the text editor.
2. Add the highlighted tags to the text as follows:
<h1>Welcome to my first webpage</h1>
3. Save the file. Switch to the browser and reload or refresh the page display.

Note how the text display changed. It is now larger and formatted in boldface.

Web designers use heading tags to identify the importance of specific content and to improve their
site rankings on Google, Yahoo!, and other search engines. Headings also help individuals who use
screen readers and other assistive devices that allow them to access web-based content.
Applying inline formatting

So far, all the tags you have used work as paragraph or standalone elements. These are referred to as
block elements. HTML also provides the ability to apply formatting and structure to content that’s
contained within the flow of another tag, or inline. A typical use of inline code would be to apply bold
or italic styling to a word or a portion of a paragraph. In this exercise, you will learn how to apply inline
formatting.

1. Switch back to the text editor.

2. Add the highlighted tags to the text as follows:
<p> Making webpages is fun&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <strong><em> and easy!</em>
</strong></p>
3. Save the file. Switch to the browser and reload or refresh the page display.
Strong and em (emphasis) are used in place of the tags for bold (<b>) and italic (<i>) because they
provide enhanced semantic meaning for visitors with disabilities or visual impairment, but
the visual result is basically identical.

Most formatting, both inline and otherwise, is properly applied using cascading style sheets
(CSS). The <strong> and <em> tags are among the few still acceptable ways to apply inline
formatting using specific HTML code elements. Technically speaking, these elements are
intended more to add semantic meaning to text content than to add styling, but the result is the
same. Today, modern browsers still display <strong> and <em> as bold and italics, respectively.

However, this may change in the near future. There has been a move to separate the content from its
presentation, or formatting, over the last decade. Although most browsers and HTML readers currently
apply default formatting based on specific tags, this may not always be the case.
Adding structure

Most webpages feature at least three fundamental elements: root (typically <html>), <head>,
and <body>. These elements create the essential underlying structure of the webpage. The root
element contains all the code and content, with the exception of any dynamic code that must load
before the page content itself. This dynamic code is usually written in web programming
languages such as ASP, Cold Fusion, or PHP. The <head> element holds code that performs
vital background tasks, including styling, external links, and other metadata. The <body> element holds
all the visible content for the webpage, such as text, tables, images, movies, and so
on.

The sample page you created doesn’t have a <head> element. A webpage can exist without this
section, but adding any advanced functionality to this page without one would be difficult. In this
exercise, you will add <head> and <title> elements to your webpage.
1. Switch back to the text editor.
2. Add the highlighted tags and content as shown here:
<html>
<head>
<title>HTML Basics for Fun and Profit</title>
</head>
<body>
3. Save the file. Switch to the browser and reload or refresh the page display.
Did you notice what changed? It may not be obvious at first. Look at the title bar or window tab of
the browser. The words “HTML Basics for Fun and Profit” now magically appear in the tab or
title bar above your webpage. By adding the <title> element, you have created this display yourself.
But it’s not just a cool trick; it’s good for your business too.

Google, Yahoo!, and the other search engines catalog the <title> element of each page and use it,
among other criteria, to index and rank webpages. The content of the title is one of the
items typically displayed within the results of a search. It also appears automatically when you
create a bookmark for that page in your browser.

A well-titled page could be ranked higher than one with a bad title or one with none at all. Keep
your titles short but meaningful. For example, the title “ABC Home Page” doesn’t really convey any
useful information. A better title might be “Welcome to the Home Page of ABC Corporation.” Check
out other websites ( especially peers or competitors) to see how they title their own pages.
WRITING HTML IN
DREAMWEAVER
So the inevitable question is, “If I can write HTML in any text editor, why do I need to use
Dreamweaver?” Although a complete answer awaits you in the coming lessons, the question begs a
quick demonstration. In this exercise, you will re-create the same sample webpage using
Dreamweaver.

1. Launch Dreamweaver CC (2019 release) or later.

2. Define a new site based on the lesson02bonus folder.
3. If necessary, select the Standard workspace from the Workspace menu, or choose Window >
Workspace Layout > Standard.
4. Choose File > New.
5. In the New Document dialog, select the New Document category.
6. Select HTML from the Document Type column, if necessary.
7. In the Framework section, choose the None tab.
8. If necessary, in the Doc Type menu, select HTML5.
9. Click Create.
A new empty HTML document appears in Dreamweaver. The document window may default to one of
four displays: Live view, Code view, Design view, or Split view.
10. If it’s not already selected, click Code view at the top of the document window.

The first thing you should notice in Code view is that Dreamweaver gives you a huge head. Start over
the text editor. The basic structure of the page is already in place, including the root, head, body, and
title elements, among others.

Another advantage is evident when you need to view the results of your coding efforts. The text editor
required the use of a separate application to preview the HTML code. Dreamweaver provides a built-
in method.
1.Click the Split view button.

In Split view, the interface is divided into two windows. One will show the HTML code; the other can be
used to provide an accurate preview of the finished webpage. This preview alone can save you hours
of time loading and previewing pages in a separate application.
2. If necessary, activate Live view in Split view.
The program interface should now be divided in half, displaying Code view in one window and Live
view in another. Dreamweaver also makes it easy to write HTML code.
3. In the Code view window, insert the cursor after the <body> tag and enter the following text:
Welcome to my second page
Live view renders the HTML code as it would appear in a web browser. The current version is based on
the same engine as Apple’s Safari. After you enter the text, it may appear immediately in the Live view
window. However, sometimes you may need to refresh the preview to see the changes.

4. Click in the Live view window to refresh the preview, if necessary. The text appears in Live view
without any special formatting.
5. In the Code view window, insert the cursor at the beginning of the text “Welcome to my second
page.”
6. Type <

7. Type h
8. Double-click h1 from the list to insert it in the code. Type > to close the opening tag, if necessary.
9. Move the cursor to the end of the text. Type </ at the end of the sentence.
10. In Code view, press Enter/Return to insert a line break.
Type <p and press Enter/Return. Type > to close the tag.
11. Type Making webpages in Dreamweaver is even more fun! and then type </ to close the <p>
element.
12. Select the word “more.”
13. Choose Window > Properties to display the Property inspector, if necessary.
This panel is an important component to many workflows in Dreamweaver. If it appears as a floating
panel, you can dock it to the bottom of the document window so that it will be handy when you need it.
14. In the HTML tab of the Property inspector, click the B button and the I button to apply
<strong> and <em> tags to the selected text.
These tags produce the appearance of bold and italic formatting on the selected text.

Only two more tasks remain before your new page is complete. Note that Dreamweaver
created the <title> element and inserted the text “Untitled Document” within it. You could select the
text within the code window and enter a new title, or you could change it using
another built-in feature.
15. Locate the Document Title field in the Property inspector, and select the Untitled Document
placeholder text.
16. Enter HTML Basics, Page 2 in the Document Title field.
Enter HTML Basics, Page 2 in the Document Title field.

The new title text appears in the code, replacing the original content. It’s time to save the file and
preview it in the browser.

17. Choose File > Save.

Navigate to the folder lesson02bonus. Name the file mysecondpage and click Save.
Dreamweaver adds the proper extension (.html) automatically.

18. Right-click the document tab displaying the name of the file. Select Open In Browser from the
context menu, and select your favorite browser.

The completed page appears in the browser window.

Using Dreamweaver you completed the task in a fraction of the time it took you to do it manually in a
text editor.
You have just completed two webpages—one by hand and the other using Dream-weaver. In both
cases, you can see how HTML played a central role in the whole process.
Video:

https://www.youtube.com/watch?v=qz0aGYrrlhU

Watch time: 1 hr 30 mins

 THAT’S ALL FOR TODAY
PLEASE LET ME KNOW IF YOU HAVE ANY QUESTIONS