So You want To Make A website

created by Apps for Aptitude

Scroll or click to begin!

Why Should I make a website?

It's a fun way to express yourself in the most used media around the world. You make your own rules and the start up costs are really low compared to the average yield.

Next

What is HTML?

HTML is the easiest and most awesome language ever: HTML ( H yper T ext M arkup L anguage) is the language used to write Web pages. You are looking at a Web page right now. Using HTML, you will be able to learn how to build the backbone of this page. We code things in HTML to create things to display on web pages.

Let’s start learning!

< Taglines >

HTML is composed of tags! Tags look like this:

Tags are used to change the appearance of a web page, show a graphic, and make links to other awesome web pages. To begin a tag, we use < . That symbol opens the tag. To close a tag, we use /> . Depending on what we want to display, we alter the tags to instruct the browser what to display.

Next

< strong >Bold< /strong >

Let’s try using our first tag! Let’s use the “bold” attribute. This allows us to put emphasis on text.

Input:

I want to <strong>bold</strong> this.

The output:
I want to bold this.

Next

< em > Italicize < /em >

Let’s try italicizing text!
To italicize a word, you simply put < em > before the word and < /em > after it:

Input:

I want to <em>italicize</em> this.

The output:
I want to italicize this.

Next

< u > Underline < /u >

Let’s try underlining text!
To underline a word, you simply put < u > before the word and < /u > after it (just like with bolding and italicizing)

Input:

I want to <u>underline</u> this.

The output:

I want to underline this.

Next

Moving on...

Linking

Links are tags that redirect your browser to another site. Links are a little more complicated because they have two parts. But I’m sure you will get the hang of it!
Part 1 of the hypertext link tag: Provide the link to click
Part 2 of the hypertext link tag: Provide the user information about the link

Input:

<a href="http://www.appsforaptitude.org">Go to Apps for Aptitude</a>

The output:

Go to Apps for Aptitude

Next

Images

The IMG tag instructs the browser where the source of the image is. It can be an image from another site or an image on the server. What’s nice about IMG tags is that you can choose either destination, giving you creative freedom!
Let’s try coding an IMG tag that displays an image from another site. The image from this site comes from appsforaptitude.org.

Input:

<img src="http://www.appsforaptitude.org/afalogo.png">

The output:

This tag is easy to learn, but you must be careful when using it. Make sure you keep your letter case correct. If you don’t keep the right case of letters, the image won’t display correctly on the web. Additionally, make sure that you have the permission of the author of the image BEFORE you put it on your site.

Nice Job!

Great! You know the basics of .html!

This website was created for the createhs coding competition for the month of October. Check out their awesome mission at createhs.com

Click for more resources

Also check out these awesome sites

Click on the logos or the titles to visit their sites

Learn more about Apps for Aptitude

AFA

Apps for Aptitude is an organization led by high school students who are ardent about using their programming skills to help society. As a 501c3 organization, the team addresses technological and reading literacy.
Apps for Aptitude works to improve reading literacy by donating profits that aren't used to sustain the organization to help local nonprofits in San Antonio, like San Antonio Youth Literacy.
Additionally, we believe that every student should know how to code. One of the ways we accomplish that goal is to break social barriers associated with programming.
How do we do that? We organize the largest high school hackathon. EVER. By creating an environment more towards collaboration, we think we can break the stereotype of the "introverted programmer".
We're just starting to plan, but we need your help! If you're passionate about students learning to code, please send us email to establish a partnership.
Visit us at our website to learn more.

Like us on facebook
Visit our Twitter