April Days–Drupal #3 (For Real)

email me right now.

sethtowerhurd[at]gmail[dot]com

Now…we’re starting.

go to websites.beonair.com/[yourusername]

Screen Shot 2013-09-04 at 10.08.39 AM

Enter your user name and password that I sent you.

DO NOT change your password. Or, if you do…DO NOT forget it.

Appearance

You can change the “theme,” aka overall look, of your website easily. However, none of these look that great. We’ll build something you can show employers in the WordPress class. This is just to show you how to manipulate HTML code.

You can pick another theme if you want. Go to “appearance” on the top menu, and hit “activate” on the one that you feel sucks the least.

Screen Shot 2013-09-04 at 10.13.53 AM

Creating your first page. 

Click “add new content.” Then create a “basic page.”

Screen Shot 2013-09-04 at 10.19.35 AM

You’ll get this. Write two paragraphs about yourself. DO NOT proceed. Stay there. Write two paragraphs and stop.

Screen Shot 2013-09-04 at 10.20.05 AM

Adding Headlines, Subheadlines Bold and Italics

To add a headline, start with this code: <h1> and end with this code </h1>

It should look like this:

<h1>This is my bio.</h1>

You can also ad smaller “sub headlines”

<h2>This is another part of my bio.</h2>

To add bold, start the phrase you want bolded with this code <strong> and end with this code </strong>

I like the <strong>Chicago Bulls</strong>

To add italics, start with <em> and end with </em>.

I like the <em>Chicago Bulls>

To create a link out, copy the code from here (do not copy it from this blog).

It will look like this (DO NOT COPY THIS ONE)

<a href=”http://www.w3schools.com/&#8221; target=”_blank”>Visit W3Schools!</a>

To create this sentence (with a link out):

I like the Chicago Bulls.

Do this:

I like <a href=”http://www.w3schools.com/&#8221; target=”_blank”>Visit W3Schools!</a>

Now, let’s first add the site you want to link out. take out “http://www.w3schools.com/&#8221; and drop in the site you want to link to BETWEEN the quotation marks. DO NOT DELETE the quotation marks.

Now, it will look like this:

I like <a href=”http://www.nba.com/bulls/&#8221; target=”_blank”>Visit W3Schools!</a>

The last step is to replace >Visit W3Schools!< with your text between the reverse carrots.

I like <a href=”http://www.nba.com/bulls/&#8221; target=”_blank”>Chicago Bulls</a>

And…you’re done.

 

Before We Go On…Some General Stuff. 

Here are some things that you need to do in Drupal when making pages.

1. ALWAYS (this is pretty much for the rest of your life) select “Full HTML” mode over “Filtered HTML” or “Basic.”

2. Select “provide a menu link” when you want the page to show up.

Screen Shot 2013-09-04 at 10.42.37 AM

Embedding Video/Other Elements

Are you on Full HTML? Cause if you’re not, this isn’t going to work.

Let’s embed a YouTube video to start off.

1. Find a video on YouTube.

2. Go to “share” and then “embed code.” Do NOT grab the link…grab the embed code.

Screen Shot 2013-09-04 at 10.45.43 AM

3. Drop the embed code onto your page, with a page break <p> above and below the code.

It should look like this.

Screen Shot 2013-09-04 at 10.47.51 AM

Embedding Pt. 2: Pictures

One safe way to get pictures for your site is through Flickr Creative Commons. This is where photographers try to build up business by giving away high quality images. The Stock Exchange is another site that does this, but I don’t think they’re as good.

Click on the Flickr link above, and search for something. I searched for “government hearing.”

Screen Shot 2013-09-04 at 11.54.39 AM

Choose a picture, and click the “share” button.

Screen Shot 2013-09-04 at 11.56.47 AM

Then click “HTML Code” button, and choose a size.

Then, drop it in just like a video.

You need to give credit to the photographer. So, drop in the pic, then link back to their Flickr page. It should look like this.

Screen Shot 2013-09-04 at 12.19.12 PM

For the Grade

–2 pages.

–2 articles.

with…

–headline

-subheadline

-bold

-italics

–video(s)

–pic(s)

PLUS

–poll (which we’ll create tomorrow. It’s boring. Trust me).

 

 

 

Advertisements
Posted in Drupal

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: