s for Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 4 Kim Explores WordPress City . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 Welcome to WordPress City . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 Kim Learns Her Way Around WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 Kim Builds Her First Page in WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128 Kim Organizes Her Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133 Kim Adds Photos and Other Media to Her Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 Getting Started with WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 Logging In and Out of WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 Check Your Work as You Go . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148 WordPress Content: Posts and Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 Plan Your Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150 Creating Your First Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151 Creating a Blog Post . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164 Getting Organized: Post Categories and Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166 Featured Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168 Using Video, Photos, and Quotes with Post Formats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 Managing and Deleting Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171 5 Customizing WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173 The Appearance Panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176 Superpower Your Site with Plugins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182 Kim Looks Behind the Curtain . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 Changing the Appearance: Theme Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193 Customizing Your Theme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196 Customizing Your Navigation Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199 Understanding the Screen Options Tab . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202 Customized Settings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203 Advanced Customization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205 Plugins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206 Widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210 Updates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213 Moving Hosts Using the Tools Panel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214 For More Help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215 vi Contents 6 The Big Launch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217 There’s No Place Like Your Web Host . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 Kim’s Portfolio Finds a Home . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228 A Network of Friends . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234 So You’re Ready to Set Up Your Website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237 Setting Up Hosting: A Home Online . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239 Getting a Basic HTML and CSS Site Up and Running . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240 Setting Up WordPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244 Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245 Contents vii About the Author Nate Cooper is a writer and consultant in New York City. After working in retail marketing at Apple Inc., Nate has established himself within the New York tech and entrepreneurial commu nity, writing on the subject of business strategy. His company Simple Labs consults with businesses on WordPress implemen tation and content strategy, and regularly draws audiences for events on the topics of communications and technology. Photo credit: Amanda Ghanooni About the Illustrator Kim Gee is an illustrator and graphic designer, currently living in New York City with her boyfriend and her pet dog, Tofu. In 2010 she created her eponymous web comic and has since self-published a graphic novel and mini-comic collecting her work. A Note from the Author When I started my consulting business, I anticipated a demand for basic web skills in the design community. Graphic designers who’d been able to get by knowing just Photoshop, Illustrator, and InDesign would tell me that their clients started expecting them to know how to write HTML and CSS. As companies started shifting over from proprietary content management systems to general CMSs like WordPress, the need for designers to have basic tech knowledge grew. Today, designers must be able to create content both for print and for the Web, and that means knowing HTML and CSS. When seen against the media’s transition from print to Web, perhaps this shouldn’t be shocking. What surprised me, however, is how much interest in these skills has spread beyond the design and media communities. If you’re as old as I am, you might remember a time and place when office desks didn’t always have computers on them. I remember visit ing my dad’s office at a community college while I was still in high school. He was considered forward-thinking because he not only had a computer on his desk but he actually read his own email, which was unheard of by certain college administrators. We don’t live in that world anymore. It didn’t take very long for the Internet, desktop computers, word processing, typing skills, and email to become standard tools for nearly every single job in existence. Now, not only designers, but all sorts of professionals are required to produce content for the Web using basic HTML and CSS. The Web is taking over, but that doesn’t mean learning about it has to be a pain. My hope is that this book will appeal to those people feeling left behind as well as those who want to get ahead. We live in an ever-changing world where the skills you learn today aren’t guaranteed to carry you into the future. To succeed in the jobs of the future, you’ll have to learn not only what’s needed for the task at hand, but also how to adapt and learn new skills. Learning shouldn’t be a chore! Once you figure out how to make learning a fun experience, you’ll crave it. Whether you’re a designer, writer, student, or anyone else who’s new to website design, I hope you find this comic funny and interesting, but I also hope it inspires you to adopt the mantra learning is awesome! Looking forward to the future! :) Nate Cooper July 2014 Acknowledgments This book started as a Kickstarter project. Though the project has evolved quite a bit since the original plan, I wanted to express my sincere thanks to those who initially supported me in my goal of writing an educational comic book. These early adopters proved that people want this book to exist and put their money where their mouth is. I thank them for believing in me, and in this concept. A special thanks to my top funders: Matthew Bergman, Dwight Bishop, Dean Cooney, James Cropcho, Sue Maisonneuve, Steven Morrison, Edward O’Neill, and Johan Uhle. Thanks also to: Gail Amurao, Angie Hall Anderson, Ari Arsyadi, Tony Bacigalupo, Stephen Bennett, Claire Burns, Nicole Calasich, Luke Chamberlin, Sara Chipps, Ernie Cooper, Jessica Cooper, Katrina E. Damkoehler, Colin Deeb, Martha Denton, Amy Donnelly, Danny Dougherty, Tarynn Farmer, Edward G, George Haines, Steven Hodas, Jim Hopkinson, Bill Johnson, Raygan Kelly, Mitch Kocen, Marissa Levy Lerer, Jonathan Levin, Anna Lubrecht, Michelle Mazzara, Colette Mazzucelli, Brenna McLaughlin, Lura Milner, John Murch, Stefan Nickum, Jason Nou, Paul Orlando, Eric Pan, Craig Plunkett, Julie Roche, Seth, Marny Smith, Shakti Andrea Smith, Kimberly Ann Southwick, Bobby Stoskopf, Erica Swallow, Harrison Swift, Kara Szalkowski, Sean Talts, Sophia Teper, Jennifer Tzahi, Jeremy Wadhams, Joe Watkins, Stefan Wehrmeyer, and Katy Zack. I would also like to thank Shay Howe for his valuable feedback throughout the writing process, and everyone at No Starch Press who helped to turn this book into a reality. 1 The First Day of Class Web Basics 101 Now, sun salutation and... breathe... I’m so excited! My web class starts in just a few hours. Finally, I’ll be able to get it together and build my online portfolio. Web Basics 101 3 Namaste! 4 Chapter 1 The First Day of Class Hey, Doug! Hey... Kim...? Darn it! Oh! Hey, Kim. How’s it going? Web Basics 101 5 Great! I’m just coming from yoga class. So, a bunch of us are heading over to this show later tonight if you wanna come. 6 Chapter 1 The First Day of Class Can’t make it tonight, Doug. After I drop off these library books, I have to go to my Web Basics 101 class at seven. It’s time I finally learned how to make a website. You mean that portfolio website you’ve been talking about? Oh, cool. Well, let me know the address when your site is live! Gotta run! Yep! Web Basics 101 7 Uh oh! Don’t want to be late. 8 Chapter 1 The First Day of Class Made it! Is everyone here? Web Basics 101 9 Welcome to Web Basics 101. My name is Nate, and I’ve been building websites since 1997. I’ve been using WordPress since 2005, and now I’m going to teach you how to get your website up and running. Sounds like I’m in the right place. 10 Chapter 1 The First Day of Class What You Need In this book you’ll learn the fundamental concepts that go into building a website. We’ll discuss the basics of HTML, CSS, and WordPress. By the time you’re finished, you will have everything you need to launch your very own website. One little book can’t teach you every thing about developing websites, though. Learning is a process, and I hope that this book is a helpful beginning on your journey to becoming a web guru. It’s up to you to do the exercises and to make sure you get the practice you’ll need. This book takes the “learn by doing” approach. You’ll need a couple of things on your own computer to follow along. A Web Browser First, you’ll need a web browser. A web browser is what you use to view web pages online. If you’re running Windows, I recommend you download Chrome, Firefox, or Safari and not use Internet Explorer. Many older versions of Internet Explorer are not equipped to handle modern conventions for the Web. While most of what we’re doing in this book will work fine in Internet Explorer, if you go deeper into web development you’ll be glad that you started using these other browsers. If you’re on a Mac, you already have Safari installed and can stick with that if you’d like. But you may also want to get Firefox or Chrome to test out your work. Even though this is an extra step, you may find that you prefer some Firefox or Chrome features. Having more than one browser is a great idea so you can see the differences between them, as well as see how your website will appear to visitors using different browsers. A Text Editor Next, you’ll need a text editor or code editor of some kind. Why bother getting a program just to write boring old text? A good code editor is designed to help you with the tricky parts of writing HTML and CSS. When you open a text editor, at first glance it may look similar to Microsoft Word or other word processors. But once you dig in, you’ll see that it is specially designed to display code, as Figure 1-1 shows. Figure 1-1: Don’t use Word or another word processing program to write HTML (top)! A good code editor makes your job easier (bottom). It will highlight pairs of tags, use a monospaced font, and save the files in the right way. If you’re on a PC running Windows, NotePad++ is a great free option (available at http://www.notepad-plus-plus.org/). If you’re on a Mac, you can download Text Wrangler for free (http://www.barebones.com/products/textwrangler). Sublime Text is an excellent free code editor that works on both Macs and PCs (http://www.sublimetext.com/) and one I would highly recommend. Choose an editor you like, and get to know it. What You Need 11 A web browser and a text editor are all you need to follow along with the chapters on HTML and CSS. If you get comfortable using a code editor, it can pay off down the line if you pursue a more advanced scripting language, like PHP, JavaScript, or Ruby. Stuff to Know In this book, I assume you can use a file browser (Finder on Mac, Explorer on Windows) to open and save files and install programs, and that you generally know your way around a computer. There are some other basics you’ll also need to know. How Do You Read an Address? You’ve probably seen a website address before. It looks like http://nytimes.com/, http:// en.wikipedia.org/, or http://nostarch.com/websitecomic. Because we geeks like fancy names, we call this a URL, which is short for uniform resource locator. We’ll just call it a link or an address for now, though. As you move to new places on the Web, this address changes, just as your location changes as you walk around big city blocks and go to new stores. Let’s take a closer look at what each part of an address does: http://nytimes.com/articletitle ❶ ❷ ❸ ❹ ❶ First, there’s the http://. That lets us know that we’re using HTTP, the HyperText Transfer Protocol. That’s a fancy way of saying that the web browser should expect to receive an HTML document. We’ll write some of our own HTML in Chapter 2. HTTP is the most common protocol you’ll see on the Web. Another one worth knowing is HTTPS, which means Secure HyperText Transfer Protocol. You should see this protocol used on pages where you’re entering confidential information, like credit cards or passwords. You might also see other protocols from time to time, like ftp:// (short for File Transfer Protocol, which is described in “An FTP Client” on page 14). ❷ Then we have the domain name. Here, that’s nytimes. ❸ The .com that follows means that this site is commercial. While .com is still the most popular kind of top-level domain, you’ll see all sorts of different top-level domains these days. ❹ The rest of the URL points to an article, blog post, or other particular resource or page. What Are Clients and Servers? Ever wonder what’s on the other end when you go to a website, or what makes the Web work? It’s just a bunch of computers talking to one another. 12 Chapter 1 The First Day of Class When you visit Wikipedia, your computer talks to the Wikipedia server. It works a little bit like this: Iwantthis webpage. Sure, no problem. Hereyou go. When you ask your web browser to pull up a Wikipedia article, Wikipedia’s server (shown in Figure 1-2) brings you the article, just like the server at a restaurant brings you a menu or a croissant when you ask. Figure 1-2: A server can be a simple desktop computer, or it can be racks of specialized computers like the servers in this photo, which serve up Wikipedia pages. The more traffic your website gets, the bigger and better server you’ll need. (Photo credit: Victorgrigas) Until today, you’ve probably been mostly acting as a client, requesting pages from the Web. Well, now you’re going to be serving up those pages. But you might be wondering where you’ll get your own server. What’s a Host? To make sure the web pages you create can be seen by the world, you’ll need to have a server of your own. Running a server can be a pain, so people often buy space on someone else’s server. A company that sells space on a server is called a web host. For a fee, a web host stores your web pages and keeps them up and available 24/7 to anyone who wants to access them. Usually, setting up a host involves two steps. First, you register a domain (like www.natecooper.co) for a fee, and then you pick a host and pay a monthly or yearly fee for the hosting. Stuff to Know 13 An FTP Client Eventually, you’ll need a way of sending files to your host. This is how you’ll add pages and edit articles. For that you’ll need an FTP (File Transfer Protocol) pro gram. A great free FTP program available for both Windows and Mac is FileZilla (http://www.filezilla-project.org/). Once you’ve signed up for hosting, you’ll get the login information from your host and be able to connect remotely via FTP. You don’t need an FTP client yet, but you may find yourself needing one later when you have your first website. Figure 1-3: FileZilla is a free FTP application that lets you upload files from your computer to a remote server. But you don’t need to spend any money to follow along with everything covered in this book. As we build web pages in HTML and CSS, you’ll be testing them on your computer using your web browser. That means you’ll just be checking how your web pages look on your own computer, without having those pages broadcast on the Internet. When we start playing with WordPress in Chapter 4, you’ll need a host because Word Press uses technology that requires a server in order for it to work. To follow along you can use a free WordPress account from WordPress.com, or if you sign up for hosting with a third party site like Host Gator, you can set up WordPress for free (see Chapter 6). We’ll revisit some particulars of how to buy a host in the last chapter of this book. For now, file that away in the to-do list in your mind. If you’ve installed your web browser and a code editor, all you need now is a sense of adventure. Get ready to learn! 14 Chapter 1 The First Day of Class 2 The Trouble with HTML Woof! I gathered all of my photos and writing, like the teacher said. This plan will help guide me, but where should I even start? I thought I’d be ready to tear down my old site and put up my new portfolio by now. Uuuugh. Oh no, Tofu. I don’t think I’ll ever get this website finished. I tried to listen in class today, but all my notes ended up as comics. Don’t worry, Tofu. I’ll always keep photos of you on my website. *Yawn* This all seems so overwhelming... Grrr. The Trouble with HTML 17 Kim Learns Basic HTML Tags Whoa. Where are we? Looks like we lost our ride home. Let’s go look for help. Woof. Tofu, I’ve got a feeling we’re not in Brooklyn anymore... Or are we? Are you looking for the way? Eep! 18 Chapter 2 The Trouble with HTML Don’t be frightened. Did you crash-land your ship? How did you know? The smoke. Woof? I don’t know what happened! One minute I was planning my website, and the next thing I knew I was climbing out of this crashed spaceship. I don’t even know where I am. Yes. You see, I am a web guru. I am learned in the ancient language of HTML. Ah. So you are seeking to build a website! You’ve come to the right place. I have?
Like HTML? Indeed. The Web is built on languages, and to build a web page you’ll need to learn two: HTML and CSS. Don’t worry. HTML and CSS are pretty simple to learn.

This is a basic HTML page.

This is HTML. Hey, I can read this part! 20 Chapter 2 The Trouble with HTML That’s right. HTML is a markup language. That means it’s a language that gives structure to regular old text. The acronym HTML stands for HyperText Markup Language. Hyper? Like how Tofu is hyperactive? More like hyperconnected. Hyperlinks are the words and pictures in a web page that you click to take you from one page to another. Follow me. Gotcha.

is the first tag we’ll use. Huh? Is my shirt on inside out? Ha! No, not your shirt tag. Markup tags surround the text in your document to change the words between them. So, for example, if we use the text in here is italic, stands for emphasis.

stands for paragraph. That’s how we make a new paragraph! Exactly! Kim Learns Basic HTML Tags 21 Okay, I think I remember this from class. So the and the are parts of the page, too, right? So when I put something in between

and

, it will be part of one paragraph?

Tofu's awesome dog site.

The best place to get info about Tofu the dog.

Right! The tags wrap everything, and the is the part you see in the browser window. Let’s try using the

tag in the . Yep. Hey, what’s going on? My new paragraphs aren’t showing up on the page. 22 Chapter 2 The Trouble with HTML Ah, yes! When you make changes, you must save the document and then refresh the page by clicking the circular arrow in the browser. What if I want to add some more spacing in this paragraph? Like a break after the word get?

The best place to get info about Tofu the dog.

There it is! Woof! Just adding a return in the HTML didn’t work. That’s right. HTML ignores some whitespace in the code. Try putting
where you want a break, instead. Oh, I get it.
puts in a line break, right? But why is there no closing tag? Tofu’s awesome dog site. The best place to get info about Tofu the dog. Some tags, like this one, stand all on their own. But you’ll want to be careful, as most do have a closing tag and there can be problems when you don’t properly close tags. The
tag here makes the line break. Kim Learns Basic HTML Tags 23 I think Tofu is getting hungry. So
is a break and

Let’s try a link tag. On your page we’ll add...

Click here to see pictures of Tofu

The best place to get
info about Tofu the dog.

The a stands for anchor. A boat’s stands for paragraph, but what’s up with ? Well, that sounds a little silly.

Click here to see pictures of Tofu

The best place to get
info about Tofu the dog.

Whoa, that’s really weird. Now all the text is part of the link. Click here to see pictures of Tofu The best place to get info about Tofu the dog. Ah. So I’ll have to be careful to close my links properly— and keep them away from Tofu. That’s what happens when you don’t close an HTML tag properly. Tofu bit off the . Without it, the browser doesn’t know where the link ends, so our tag runs on indefinitely. Your link goes until the end of the page! Kim Learns Basic HTML Tags 25 Paths and Naming Conventions HTML is super helpful! I’m planning on building a portfolio website to showcase my illustrations. The path? What do you mean? And now we who build websites must use it. The path is where all your stuff is stored— think of it like folders on your computer. Learning HTML tags is important, but the HTML pages themselves have to be stored using paths. I see. This is good. But your road may be fraught with peril if you do not understand the path. You see, many years ago, scientists using an operating system called UNIX invented the hierarchical filesystem. So study well. 26 Chapter 2 The Trouble with HTML Uh, that maze looks scary.Don’t worry. I will be your guide. So what do I need to know about the paths and what other tags will help me build a portfolio? Do you still have that document you were writing? Of course. Great. Call it?When Oh. What did you call it? You don’t know? That’s super important! you last saved it. Oh. I should probably name it something I can remember, right? I’ll call it Tofu.html. I dunno. Why? Paths and Naming Conventions 27 That’s great! You remembered that you have to have the .html at the end of the file. Otherwise, the web browser doesn’t know that there’s HTML in the document. Good. Now let’s check our work in the web browser. We’ll visit your site at http://www.photosoftofu.com/. Okay. Hurray! I remembered something from class! Woof! You type the name of the server first... ...and because we’re at the root, the base level of the file storage, we can just type the filename Tofu.html. http://photosoftofu.com/tofu.html404 28 Chapter 2 The Trouble with HTML A wild 404 dragon appears. Paths and Naming Conventions 29 There, that's taken care of. Now what did you type into the browser? It’s dangerous to go alone! Take this. It is the Sword of Standards and Conventions. Oh, I see. You typed tofu.html and not Tofu.html. 404 is the error produced by the web server when your file can’t be found. Keep in mind that servers are case sensitive, too, which is an easy mistake to make. What did you think would happen…you’d just get an error on the page?* * 404 errors appear simply as a warning, but your goal as a web developer should be to avoid these errors the same way you would avoid a fire-breathing dragon. Broken links mean that your visitors won’t have a good time on your site. Your elders are pretty terrible at naming things. You mean one little mistake like that summoned that dragon? This web stuff can be dangerous, Tofu. Indeed. But if you follow the examples of the elders, you’ll never go wrong. 30 Chapter 2 The Trouble with HTML Naming Conventions for HTML Documents If you follow a few tips when naming your document, you’ll end up defeating dragons (errors) or avoiding them altogether. • Be consistent with capitalization. If you have a choice, don’t use any capitals in your document names. So, for example, Tofu.html, ToFu.html, and TOFU .HTML are all different names. It’s easiest to consistently name your pages all in lowercase, like tofu.html. • Don’t use spaces in filenames. If you have a file named tofu in space.html on your computer, it will likely show up as tofu%20in%20space.html when viewed in a web browser. However, this is not guaranteed to work on all computers. Play it safe. Don’t use spaces, or if you must, substitute hyphens like so: tofu-in-space.html. • Files named index.html are special. An index file is the default file for the folder and will load if no other file is specified. Paths and Naming Conventions 31 Whoa, whoa, whoa. Default file? Index? What do you mean? Oh, I see. So when the page is called index.html, you don’t have to type the whole name. What happens when I type http://www.photosoftofu.com/ index.html? It’s just the same thing. Wow! Look at that, Tofu! Try renaming your tofu.html document to index.html. Now try visiting your site; just type http://photosoftofu.com/. Click here to see pictures of Tofu The best place to get info about Tofu the dog. Try it out. I’ve always wondered why I don’t always see the name of the file in the URL when I visit a website. Woof! 32 Chapter 2 The Trouble with HTML Adding Pictures Okay, now that I know how to create an HTML file and name it, I’m ready to start putting some photos onto my site. Thanks for your help, Guru! What’s next? Hmm. Let’s consult the map. Adding Pictures 33 What's this? Oh, right. The site map. Why do I need that now? I’ll show you. This forest you see ahead of you is the structure you created. Now you must navigate it to properly link your photos and images. Before you start to put your pages together, you should use the site map you made in class to guide you. 34 Chapter 2 The Trouble with HTML I have but one more HTML tag to show you before you enter the forest: the tag. With the tag and the proper path... How did you do that? Woof. ...you can embed your images with ease. We’re here at the root, remember? This is the base of the file structure. So if I wanted to go directly to this image, do you know the path? Adding Pictures 35 http://photosoftofu.com/tofu.jpg It’s here, right? Yep! This is called the absolute URL, since it’s an exact route to that image. The code in bold shows how you’ll embed this image into your HTML.

Click here to see pictures of Tofu

The best place to get
info about Tofu the dog.

36 Chapter 2 The Trouble with HTML But what happens if I move this file from one server to another? I was thinking I may eventually want to make another website called kimgeeillustration.com. After that I’ll shut down the photosoftofu.com site. Aha! You’ve illustrated the problem with using absolute URLs in and tags. If we move the files to a new server or move them around within a site, the images will not be found, and yes, we’ll get some kind of fire breathing error. This src is short for the “source” of your image file. These additions to your tags are called attributes. You’ve already seen one attribute, the href in the tag. Will one of those 404 dragons show up? So what can we do? Right now the HTML document we’re working on is at the root of the site; that’s like the first folder. The image we want to use is also in the root folder. When we write just the image name, the server looks for that image in the same folder as the HTML file. The server will always do this, regardless of where that folder lives. So if we move the entire folder we don’t have to edit the pathname in our HTML! Adding Pictures 37 As you walk through the file structure, you’ll create new folders that will help organize your files. Keep it simple, though. The alt attribute helps to describe the You mean I have to go alone? Errr? I will be in touch with you telepathically, but you’ll need to navigate the hierarchical filesystem in order to properly store your photos. One other thing about the tag—be sure to add this: Right. Search engine picture in case it doesn’t load or when it’s being read by a program. For example, the alt attribute is read when the site gets indexed by a search engine like Google. This is important for SEO. optimization. We learned about that in class. 38 Chapter 2 The Trouble with HTML Organizing Files and Folders Let’s go, Tofu. Woof! Right. I remember this. Organizing Files and Folders 39 Here we go, Tofu. I’ve placed my bio—the index.html file—in the About folder. Since I named the file index.html, people who visit my website can just type about and not the entire URL. Now to start laying out the portfolio. http://photosoftofu.com/about 40 Chapter 2 The Trouble with HTML All right, Tofu, here’s the Portfolio folder. I want to have your pictures as just one section of my portfolio. I’ll make an HTML page and link all my photos of Tofu using the tag. http://photosoftofu.com/portfolio ), which are interpreted by a web browser. When a web browser sees an HTML bracket within a page, it recognizes the value of the bracket and changes the text that follows according to a set of rules. Once you’ve chosen a code editor, building an HTML page simply requires some com mon sense and memorization. Let’s use some basic tags to start building a web page. Open your text editor and follow along. Getting Started All web pages start with a document declaration called a DOCTYPE. This tells the web browser which version of HTML you are using so that it knows which set of rules to obey. In this book we use HTML5. The DOCTYPE for HTML5 is , so this should be the very first line on your HTML document. This simple declaration prepares your visitor’s web browser so it knows which version of HTML it’s about to receive. HTML5 is the fifth iteration of the language! Web designers improve their tools over time, so HTML evolves and tags fall in and out of fashion just as words in English do. The next bit of HTML you’ll write is where the exciting markup really begins. Use the tags to begin and end your document. All of the HTML for this page will go between those bracketed tags. Add some text between the tags (this process is called marking up), as shown here: My first web page! Allllll right! Remember that HTML is not whitespace dependent. By leaving blank lines between the and tags, we’ve given ourselves room to write more content for our page. Whitespace (like paragraph returns and tab spaces) will be ignored by the browser, but it makes it easier for us humans to read. You can now save the document and name it test.html. When naming an HTML page, avoid using spaces and special characters (like #, $, &, and *). If you want to use more than one word in the filename, use a hyphen (-) to separate each word (for example, my-first-test.html). HTML filenames are case sensitive, so for con sistency’s sake we will keep all of our filenames lowercase. This page should work in our browser, but it’s missing some standard pieces of an HTML document. So let’s add some more tags to build the basic outline of our page. Playing with HTML 47 Between and , add the following tags with a line space between them: and . Place the opening tag above your sentences, “My first web page! Allllll right!” and the closing tag below them. These add the head and body elements to your HTML page—the body of the document is where all the content is displayed, and the head contains information about your page (see “Adding a Head to Your Document” on page 54). We’ll focus on content for the body for now. Your document should now look like this: My first web page! Allllll right! Save your file again, and then try opening test.html in a web browser like Chrome. You should see whatever text you added; I see a web page that reads “My first web page! Allllll right!” This may seem like small potatoes, but if you right-click the page and choose View page source, you should see your handiwork: the HTML that created this web page. When a document’s name ends with .html, the browser knows to not show the bracketed HTML tags in the page. Rename the file to test.txt. What do you think will happen if you open this file in your browser? Try it, and you’ll notice that the HTML tags actually appear within the window this time. This is because the filename ends with .txt. Your browser assumes the file does not contain any HTML and simply displays all of the contents of the page, including the HTML tags. Naming the file with the .html extension is important for the web browser to under stand what to do with the page. Switch the filename back to test.html and then reload it using the refresh button in your browser. As you edit this HTML document, you can save and refresh your browser whenever you want to test that the HTML markup you’ve added is working. Using Basic HTML Tags Now we’re ready to start adding more content. The first tag we’ll try out is the paragraph tag,

. Delete your test message, and add

Hello World!

between the tags. The tag signifies the beginning and ending of the main content area of the page. Any text, including any HTML formatting, placed between the and tags will appear within the browser window. When you save and then refresh the page, you should see your text but not the

. Great work! 48 Chapter 2 The Trouble with HTML Now let’s add a second paragraph. Try putting

This is a second paragraph.

at the end of that first line. Your file should look like this:

Hello World!

This is a second paragraph.

When you refresh the page in your web browser, you should see that the paragraphs are separated by a blank space, as shown in Figure 2-1. Figure 2-1: This is what your page should look like in a web browser. Why are the paragraphs separated even though in the HTML code they are on the same line? Remember that HTML doesn’t care about whitespace, so the

tag is what decides where the paragraph goes, not an actual line break. Although we don’t really need returns in our HTML, it is still handy for readability to have a “real” line break in our code. Try writing your HTML document this way:

Hello World!

This is a second paragraph.

Using Basic HTML Tags 49 You might notice that I’m indenting my lines. Indents are not recognized or required by HTML; they are there purely for readability. You will often see code written like this; it’s an example of a convention of HTML. It makes our HTML easier for others to read and helps us ensure that we close all of our tags properly. Problems can occur if you do not properly close markup in your code. We will see an example of a common mistake after we learn our next two tags. Try applying the tag and tag to some new sentences in the second paragraph, shown here in bold:

Hello World!

This is a second paragraph. This is bold text. This is italic.

Now save the file and refresh your browser. You should see that the sentence This is bold text. appears in boldface in the web browser. The tag is typically used to set text in boldface. The sentence This is italic. should appear in italic. The tag (short for emphasis) typically sets your text in italic. What happens if you don’t properly close your tags? Try this: Delete so that the tag isn’t closed. Remember to save and refresh your browser. Now the entire rest of the page is bold. This demonstrates why it’s important to properly close all of your tags. When your tags aren’t closed, the web browser doesn’t know when the markup ends, so it contin ues until the page ends. In the case of a tag, this is pretty inconvenient because it makes all of your paragraphs bold. In a worst-case scenario, forgetting the closing tag might make your content disappear completely from the page. Get in the habit of closing each HTML tag and always double-check before you save your page. Make sure you put back in that tag before we move on! Some tags are self-closing. This means that they stand alone without having to wrap themselves around text—for example,
. Try putting the
tag between This is bold text. and This is italic.:

Hello World!

This is a second paragraph. This is bold text.
This is italic.

50 Chapter 2 The Trouble with HTML When you save and refresh your browser, you should see a line break. A line break puts the text on a separate line, like

but with a smaller gap. This is sometimes called a soft return in word processors. Paragraphs and returns aren’t the only dividers within the body of a page. There’s also the heading tag. HTML offers six types of headings, with

being the most impor tant and

being the least important. Generally, headings are used to define sections on a page, just like section headings in a book or an article. Let’s change the paragraph

Hello World!

to an

:

Hello World!

This is a second paragraph. This is bold text.
This is italic.

When you save your page and reload it in your web browser, you should see that the

tag has made the text Hello World! appear larger on the screen. If we had a longer document, we might have subheadings that use smaller heading tags like

or

. Remember that headings go all the way from

to

, so you can use these tags to visually divide sections of your page. Now we’re ready to make links. This tag might seem a little tricky at first. You can think of a link as an anchor that has a reference. The tag looks like this: Visitors can click on me! Opening tag Link text Closing tag URL The a stands for anchor and the href stands for hyperlink reference. Notice the angle brackets on either end; that whole thing is the opening tag! The href defines the website address, or URL, that will be loaded when someone clicks the link. Between this opening and the closing tag , we have the “clickable” link text. Try it out with any URL:

Hello World!

This is a second paragraph. This is bold text.
This is italic.

Using Basic HTML Tags 51

Click here!

You should notice when you view the page in your browser that the words Click here are blue and underlined, indicating they are a hyperlink. If you click the link, it will take you to my website. Every page on the Web has a corresponding website address (URL) that you can use to link to it directly. You can also link to other pages on your own website. Knowing how to create paragraphs, headings, italicized and boldface text, and links is invaluable, so take some time to memorize these tags and how they work. Almost every web page in existence will use them. Even when you use more sophisticated systems like WordPress, knowing some basic HTML markup will serve you well. Embedding Images into Your Web Page Now let’s try to embed an image. There are several ways to do so, as Kim found out while building her portfolio, so we’ll want to be careful not to run into any dragons. First, you’ll need an image formatted as JPG, GIF, or PNG. You can use the tag to embed an image into your page. Like the
tag, doesn’t need a closing tag, but it can be a bit tricky because it relies on knowing the exact location of the image file to work properly. A typical image tag looks like this: It’s the img src="path-to-image/image.jpg" part that can be tricky. For an example of an image location, let’s take a look at an image hosted on my desktop. If I navigate to this image, I can find the image location in the address bar of my browser, as shown in Figure 2-2. Figure 2-2: Finding an image’s location The exact address of an image is called the absolute path or absolute URL. For us, embedding an image using the absolute path isn’t ideal, because we’re building this web page “locally” (i.e., on your computer). We’ll use a relative path instead; we’ll keep it simple and leave the image in the same folder as our HTML document, which makes the path very easy. Move your image into the same folder as your web page and rename it image.jpg (or photo.gif or photo.png, depending on your file format). As with our HTML pages, avoid using spaces and uppercase in the name. If the image is in the same folder as your test.html page, you can now embed the image using this code: 52 Chapter 2 The Trouble with HTML Your document should look like this:

Hello World!

This is a second paragraph. This is bold text.
This is italic.

Click here!

Save and refresh your browser. Is your image there? If not, make sure that you used the exact name of the image and that it’s in the same folder as your test.html file (in our example, the image is on the desktop). If you are building a portfolio like Kim and you’d like to put all of your images into a single folder, go back to the folder containing your test.html file and create a new folder called images. Now move your image.jpg file into that folder. As a test, go back and reload your page in the web browser without making any changes to your code. You should get a broken link error message, which means the image is no longer visible. To fix the error, we’ll need to correct the path in the HTML code. Find your tag: and change the file location to this: The / represents moving to one folder (or directory) within the current folder. So, for example, if you moved your photo to a folder called black-and-white, which was inside a folder called portfolio, which was inside a folder called images, the path in your HTML code would look like this: images/portfolio/black-and-white/image.jpg. The advantage of using relative paths is that, unlike with absolute paths, there is noth ing tying your HTML code to a specific location. So, if you move the entire site (in this case, the test.html page and the images folder) to a new location or host, the paths will still work. If you were using an absolute path instead, even when the files were moved the paths in the code would point to the old address and you’d see a broken image icon. There’s one other way to indicate a relative path that is specific to being on a server: starting the path with a /. When you start with a /, the browser will go all the way to the first folder on the host. This is advantageous if you have an image, like a logo, that you want to use on every page. You might write in your code, for example. This would look for the logo.gif file at the root of the host—the first folder on your host into which you can place files. Again, this helps if you ever change or move your site. Embedding Images into Your Web Page 53 Adding a Head to Your Document If you’ve followed along so far, your HTML page should look like this:

Hello World!

This is a second paragraph. This is bold text.
This is italic.

Click here!

Notice how there is a section at the top that is currently empty? So far we’ve avoided putting anything in the section of the document because we’ve been working only on things that are visible in the main window of the web browser. The section of the page contains content that goes into the main window of the web browser. So far, all of the HTML we’ve seen lives inside these tags. But the into the of your document:

Hello World!

This is a second paragraph. This is bold text.
This is italic.

Click here!

54 Chapter 2 The Trouble with HTML Save and reload your page. Did you catch what changed? Depending on your web browser, it might be difficult to see the difference, but you should now see the title at the top of the window (see Figure 2-3) or as the name of your tab. The Adding a Head to Your Document 55

Hello World!

This is a second paragraph. This is bold text.
This is italic.

Click here!

If you save and reload the page, you’ll notice that the description doesn’t show up anywhere on the page. That’s because this metadata is primarily for the benefit of external applications. For example, search engines like Google may use the meta description under neath the link to your site in search results (see Figure 2-4). metadata Figure 2-4: The meta description is what shows up beneath your page in search results. Even though the tags are sometimes used by search engines, it’s important to not assume that they can magically increase your search ranking. In the past, tags mattered quite a lot for search engine ranking, but these days they are no longer a major contributing factor. That said, adding a to your pages is con sidered a good practice. Now that we have a complete and functional web page, we’re ready for CSS. Every web page should have the basic structure we’ve created here, with a section contain ing metadata and information that’s not visible on a page, and a section containing information that appears within the main browser window. You might want to memorize some common HTML tags that we used in this chapter. Chances are, you’ll need them on your journey. 56 Chapter 2 The Trouble with HTML Some Useful HTML Tags Here is a list of commonly used HTML tags for your reference: This tells the browser which version of HTML you plan to use. This particular DOCTYPE signifies HTML5. It is not an HTML element, but a declaration that should go at the very top of your page before the opening tag. Everything contained within these tags will be processed by the browser as HTML. Every HTML document should contain these tags. Everything that is wrapped within will contain metadata that is used by the browser and doesn’t show up within the main browser window. Everything that is wrapped within will be visible in the main browser window. Your page’s content will go here.

Any text contained within these paragraph tags will be considered part of a single paragraph. Text placed between these brackets is important and usually appears larger and with a heavier font weight than the surrounding text. These tags indicate emphasized text. The text contained within these brackets will usually appear in italic. click here These are link tags. The link name here is what you’d like the link to be labeled—click here, for example. Link text is usually underlined and a different color on the page to indicate that it is clickable. You put the link destination between the quotation marks of the href. Use the absolute URL to a page to link to it.

,

,

,

,

,

These tags indi cate heading text. Like a paragraph, an HTML heading will divide text from surrounding elements. This means that you cannot have a heading within a paragraph. The number indicates the heading’s importance; a low number (h1) is more important, and a high number (h6) is less important. This importance is usually reflected in the size of the text on the finished page. Headings are often bold and large on the screen. You can use CSS to style headings however you like.
This tag signifies a line break. This is a self-closing tag, meaning there is no text to wrap it around. It can be used within a parent element like a paragraph to move text to another line, usually with less space than is found between two paragraphs. This is a self-closing tag that embeds an image into a page. The src can be an absolute or relative path to an image. The alt text is a description that is used by search engines to identify what is contained within the image. The Enter CSS 67