Go on. Explore!

lvl 0 • 0 xp

lvl 1

Home Market Decks Interests

Html

memorize.ai (lvl 286)

Section 1

Preview this deck

From journal to website, at 12 mph

Front

1 / 49

HTML Web Dev

0.0

0 reviews

5			0
4			0
3			0
2			0
1			0

Active users

All-time users

Favorites

Last updated

1 year ago

Date created

Mar 1, 2020

Cards (49)

Section 1

(49 cards)

From journal to website, at 12 mph

Front

1 First, you're going to create a rough sketch of the journal that is the basis for your page design. 2 Next, you'll use the basic building blocks to translate your sketch into an outline (or blueprint) for the HTML page. 3 Once you have the outline, then you're going to translate it into real HTML. 4 Finally, with the basic page done, you'll add some enhancements and meet some new HTML elements along the way

Back

Getting your files to the root folder

Front

You're now one step away from getting Starbuzz Coffee on the Web: you've identified the root folder on your hosting company's server and all you need to do is copy your pages over to that folder.

Back

Meet the W3C validator

Front

Let's check out the W3C validator and have it validate our lounge files. To follow along, just point your browser to http://validator.w3.org.

Back

What does the browser do?

Front

First, as the browser renders the page, if it encounters an <a> element, it takes the content of the element and displays it as a clickable link.

Back

Check out myPod's "index.html" file

Front

Open up the file "index.html", and you'll see work has already begun on myPod. Here's the HTML so far: <html> <head> <title>myPod</title> <style type="text/css"> body { background-color: #eaf3da;} </style> </head> <body>

Back

Img : it's not just relative links anymore

Front

The src attribute can be used for more than just relative links; you can also put a URL in your src attribute. Images are stored on web servers right alongside HTML pages, so every image on the Web has its own URL, just like web pages do.

Back

HTML 3

Front

The long, cold days of the "Browser Wars." Netscape and Microsoft were duking it out for control of the world.

Back

Web Browser

Front

Back

Creating the new lounge

Front

Go ahead and grab the source files from http://wickedlysmart.com/hfhtmlcss. Once you've downloaded them, look under the folder "chapter2/lounge" and you'll find "lounge.html", "elixir.html", and "directions.html" (and a bunch of image files).

Back

How the browser works with images

Front

Browsers handle <img> elements a little differently than other elements. Take an element like an <h1> or a <p>. When the browser sees these tags in a page, all it needs to do is display them.

Back

Html file MAC

Front

All HTML files are text files. To create a text file, you need an application that allows you to create plain text without throwing in a lot of fancy formatting and special characters. You just need plain, pure text.

Back

Opened web page

Front

Are you ready to open your first web page? Using your favorite browser, choose "Open File..." (or "Open..." using Windows 7 and Internet Explorer) from the File menu and navigate to your "index.html" file. Select it and click Open.

Back

Sizing up your images

Front

There's one last attribute of the <img> element you should know about actually, they're a pair of attributes: width and height. You can use these attributes to tell the browser, up front, the size of an image in your page.Here's how you use width and height:

Back

Planning your paths

Front

To figure out a relative path for your links, it's the same deal: you start from the page that has the link, and then you trace a path through your folders until you find the file you need to point to.

Back

Getting Starbuzz (or yourself) onto the Web

Front

You're closer to getting Starbuzz—or even better, your own site—on the Web than you might think.

Back

Html files Windows

Front

To create HTML files in Windows 7, we're going to use Notepad—it ships with every copy of Windows, the price is right, and it's easy to use. If you've got your own favorite editor that runs on Windows 7, that's fine too; just make sure you can create a plain-text file with an ".html" extension.

Back

Creating the ultimate fan site: my Pod

Front

iPod owners love their iPods, and they take them everywhere. Imagine creating a new site called "myPod" to display pictures of your friends and their iPods from their favorite locations, all around the world.What do you need to get started? Just some knowledge of HTML, some images, and a love for your iPod.

Back

As much FTP as you can possibly fit in two pages

Front

Seriously, this really is an HTML and CSS book, but we didn't want to leave you up a creek without a paddle. So, here's a very quick guide to using FTP to get your files on the Web. Keep in mind your hosting company might have a few suggestions for the best way to transfer your files to their servers (and since you are paying them, get their help).

Back

HELLO, my name is...

Front

Even if you've never heard of a domain name, you've seen and used a zillion of them; you know...google.com, facebook.com, amazon.com, disney.com, and maybe a few you wouldn't want us to mention.

Back

HTML 1.0-2.0

Front

These were the early days; you could fit everything there was to know about HTML into the back of your car.

Back

Web Server

Front

Web servers have a full-time job on the Internet, tirelessly waiting for requests from web browsers. What kinds of requests? Requests for web pages, images, sounds, or maybe even a video. When a server gets a request for any of these resources, the server finds the resource, and then sends it back to the browser.

Back

Sharpen your pencil.

Front

You've waited long enough. It's time to give your new URL a spin.Before you do, fill in the blanks below and then type in the URL(like you haven't already). If you're having any problems, this is the time to work with your hosting company to get things sorted out.

Back

The rough design sketch

Front

Tony's journal looks a lot like a web page; all we need to do to create the design sketch is to get all his entries on one page and map out the general organization.

Back

Finding a hosting company

Front

To get your pages on the Web, you need a server that actually lives on the Web full-time. Your best bet is to find a hosting company and let them worry about the details of keeping a server running.

Back

Always provide an alternative

Front

One thing you can be sure of on the Web is that you never know exactly which browsers and devices will be used to view your pages.

Back

HTML5

Front

Of course, with no support from the community, the marriage didn't end well and was replaced by new version of HTML named HTML5.

Back

Getting organized

Front

Before you start creating more HTML pages, it's time to get things organized. So far, we've been putting all our files and images in one folder. You'll find that even for modestly sized websites, things are much more manageable if you organize your web pages, graphics, and other resources into a set of folders. Here's what we've got now:

Back

From a sketch to an outline

Front

Now that you've got a sketch of the page, you can take each section and draw something that looks more like an outline or blueprint for the HTML page...

Back

What does the web browser create?

Front

When the browser reads your HTML, it interprets all the tags that surround your text. Tags are just words or characters in angle brackets, like <head>, <p>, <h1>, and so on. The tags tell the browser about the structure and meaning of your text.

Back

How to link to elements with ids

Front

You already know how to link to pages using either relative links or URLs. In either case, to link to a specific destination in a page, just add a # on the end of your link, followed by the destination identifier.

Back

Save lounge.html and give it a test drive.

Front

When you're finished with the changes, save the file "lounge.html" and open it in your browser. Here are a few things to try: Click on the elixir link and the new elixir page will display. Click on the browser's back button and "lounge.html" should be displayed again. Click on the directions link and the new directions page will display.

Back

HTML 4.01

Front

The good life: HTML 4.01 entered the scene in 1999, and was the "must have" version of HTML for the next decade.

Back

Organizing the lounge

Front

Let's give the lounge site some meaningful organization now. Keep in mind there are lots of ways to organize any site; we're going to start simple and create a couple of folders for pages. We'll also group all those images into one place.

Back

Meanwhile, back at Tony's site...

Front

You've come a long way already in this chapter: you've designed and created Tony's site, you've met a few new elements, and you've learned a few things about elements that most people creating pages on the Web

Back

JPEG or PNG or GIF

Front

And now for the formal introduction: meet the <img> element.We've held off on the introductions long enough. As you can see, there's more to dealing with images than just the HTML markup. Anyway, enough of that for now...it's time to meet the <img> element.

Back

Understanding attributes

Front

Attributes give you a way to specify additional information about an element. While we haven't looked at attributes in detail, you've already seen a few examples of them:

Back

From the outline to a web page

Front

You're almost there. You've created an outline of Tony's web page. Now all you need to do is create the corresponding HTML to represent the page and fill in Tony's text.

Back

The doctype test drive

Front

Make the changes to your "lounge.html" file in the "chapter6/lounge" folder and then load the page in your browser.

Back

HTML 4

Front

Ahhh...the end of the Browser Wars and, to our rescue, the World Wide Web Consortium (nickname: W3C). Their plan: to bring order to the universe by creating the ONE HTML"standard" to rule them all.

Back

XHTML 1.0

Front

Just as we were all getting comfortable, a shiny object distracted everyone. That shiny object was XML. In fact, it really distracted HTML, and the two got hitched in a shotgun marriage that resulted in XHTML 1.0.

Back

How can you get a domain name?

Front

The easy answer is to let your hosting company worry about it.They'll often throw in your domain name registration with one of their package deals..3

Back

Reworking the link in "index.html"

Front

Now all you need to do is revisit the link to Caffeine Buzz and add on the destination anchor name

Back

Edit lounge.html2

Front

Open "lounge.html" in your editor. Add the new text and HTML that is highlighted below.

Back

Meet the q element

Front

Got a short quote in your HTML? The element is just what you need.

Back

How images work

Front

Images are just images, right? Well, actually there are a zillion formats for images out there in the world, all with their own strengths and weaknesses.

Back

Moving in

Front

Congratulations! You've got your hosting company lined up, you've found a domain name, and you've got a server all ready for your web pages.

Back

Loooooooong Quote

Front

In his journal, Tony just put the Burma Shave quote right inside his paragraph, but wouldn't it be better if we pulled this quote out into a "block" of its own.

Back

Finding the destination heading

Front

To find the destination heading, you're going to have to look at the wickedlysmart.com/buzz page and view their HTML. How? Almost all browsers have a "View Source" option. So, visit the page and when it is fully loaded, choose the "View Source" option, and you'll see the markup for the page.

Back

HTML, the new "living standard"

Front

You heard us right...rather than continue to crank out version 6, 7, 8 of HTML, the standards guys (and gals) have turned the specification into a living standard that will document the technology as it evolves.

Back