• Rachel Glantzberg

How-To Code A Basic Website For Absolute Beginners

—Millstone, NJ

Note: This article’s topic was selected by our STEMᐧE Instagram followers. They requested a "How-To" article, geared towards beginners.
Follow our Instagram page @steme.ycdp to stay updated about STEMᐧE events, have a nerdy laugh, learn a little, and much more!

Learning to code is learning a foreign language only spoken by computers. The three main dialects of code are HTML (hypertext markup language) for marking up website content, CSS (cascading style sheets) for styling website content, and JavaScript for making websites more interactive. This blog will focus on building the framework of your website in HTML, but additional blogs can be published on writing code in other languages if this blog is well received.


As this tutorial progresses, you can use https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro to run your code. By clicking the "Run >>" button, you can see your code in action. As you code, refer to the images in each step to guide you through the process.

1. Set Up the Head Tag

HTML is a markup dialect, and as such, it includes elements called tags that indicate structure to a computer through < and >, called angle brackets. Brackets tell the computer that you are telling it a command via code.


The first tag to include in HTML is the <!DOCTYPE html> tag, which tells your computer that your Document Type (DOCTYPE) is based on HTML, setting the coding language. You can reinforce this code by entering <html> in the row beneath.


By placing a tag within angle brackets, you also signal to the computer that you are starting a line of code- opening a command. As you will see, every opened command should also be closed, as we will show you in the next step.

2. Create Your Headlines

To create the heading, click Enter, Tab, then write <head> . Enters and Tabs are not mandatory in coding HTML. However, they are integral to proper coding grammar. In writing code, proper grammar helps you (and others) read and edit the code easier.


To signal to your browser that you are translating from English, next write <meta charset="utf-8">.


Next, code your website Title by writing <title>Your Web Page Name</title>, which will help the browser discern the name of your website and index this information into the bookmarks, tab name, etc. Notice that you ended the Title command with </title>. The Slash / signals to the computer that you are ending this line of code or specific command.


Enter and write </head> to close the header. Again, you will notice that code containing angle brackets, a forward slash, and a command signify the end of a code section, which is the heading, in this instance.

3. Creating Body Text

In the line beneath write <body> to initiate the next area of code, the body. This is where the magic of your site starts to happen. The tags <h1> through <h8> denote heading and subheading tabs. As your heading number gets higher, the title size gets smaller, signifying header importance.


Think of headings like a book. The title of your book (webpage) is H1. The Chapter names are H2. The Sections in each chapter are H3, etc. To add the appropriate subheadings for your text, sandwich your headings between <h1>You Heading Name</h1>. Note that the 1 can be replaced for whatever heading number is appropriate. Underneath your heading tags, you can also add body text by sandwiching your text within the <p> and </p> tags, signaling a Paragraph.


For Emphasis, you can italicize words through the <em> and </em> tags and bold your tags or words with <strong> and </strong> tags.


Another way to spice up your text is with an Unordered list. This must be indented to the right, and is initiated with the <ul> tag. Enter lines underneath with an additional tab to create List items, each item starting with <li> and ending with </li>. To end the Unordered list, type </ul> in the same alignment as the starting unordered list tag.


To make this list numbered (or Ordered), just replace the <ul> and </ul> lists with <ol> and </ol>.


To add an image anywhere on the webpage, the code is (indented) <img src=“link” alt=description of image width=__> to Link to the Image Source (img src). If you have found an image online that you wish to embed, right click to find the link and paste here.


Alt represents the Alternative Text that encodes the description of the image. The alt text describes the image to the visually-impaired, to web browsers, and to search engines, like Google.


The width resizes the image, and the height adjusts accordingly. A baseline width of at least 200 pixels is suggested, and you can resize from there.

4. Completing Your Webpage

Enter two lines to type </body>, ending your body section of text. Enter a line, now adjacent to the left of the screen, to type </html> to end your code.


That’s it! You have completed your webpage! There is a lot more to learn from here, but everyone needs to start somewhere. If you would like a follow-up blog to build upon this site, let us know in the comments.


You can be featured on our Instagram page if you DM @steme.ycdp or email us with a screenshot of your completed website!
Spread the joy of learning STEM by attending our upcoming events and by liking, loving, and sharing this blog and our social media posts:

STEM·E Talks: Engineering April 17, 2021 10AM CST

STEM·E Talks: Coding and Computer Programming May 8, 2021 10AM CST

STEM·E Talks: Medicine May 22, 2021 10AM CST

STEM·E Start-Ups: 3 Day Start-Up Workshop June 4, 2021 5 PM CST


STEM·E Interviews: Dr. Jonathan Wisco on Medical Education

STEM·E Interviews: Ms. Sheeva Azma on Science Communication

22 views0 comments

Recent Posts

See All
connect with us!

Houston, TX 77040

​​

Tel: 713-817-4030

INFO@STEME.ORG

  • STEME Instagram The STEME Youth Career Development Program provides STEM education (Science Technolo
  • STEME TikTok The STEME Youth Career Development Program provides STEM education (Science Technology
  • STEME YouTube The STEME Youth Career Development Program provides STEM education (Science Technology
  • STEME Twitter The STEME Youth Career Development Program provides STEM education (Science Technology
  • STEME Spotify Podcast
  • STEME Facebook The STEME Youth Career Development Program provides STEM education (Science Technolog
  • STEME Linked-In The STEME Youth Career Development Program provides STEM education (Science Technolo
  • STEME Flickr The STEME Youth Career Development Program provides STEM education (Science Technology
  • STEME Snapchat The STEME Youth Career Development Program provides STEM education (Science Technolog
Join our email list:

STEM·E  YCDP  Brochure

https://goo.gl/qpVDyS

Program Overview

https://goo.gl/fVd3J8

Sponsor Guide

https://goo.gl/Wz2bp6

Exhibitor Guide

https://goo.gl/EUBHha

Speaker Guide

https://goo.gl/RbXL6F

2018 Impact Review

http://bit.ly/2018ImpactReview

Huey, the STEME Mascot. The STEME Youth Career Development Program provides STEM education (Science Technology Engineering and Math) to kids & teens and cultivates Young Entrepreneurs through our stem program and youth entrepreneurship program. Through our specialized STEAM workshops and STEM classes, we provide STEM activities, STEM projects, STEM curriculum, STEM learning, and STEM resources as part of our after school program (afterschool program). Our Youth entrepreneurship curriculum, entrepreneur bootcamp and 3 day startup workshop provide entrepreneur classes to teach kids to turn inventions, invention ideas, and kid designs into a kid business and teen business, turning kids & teens into kid entrepreneurs and teen entrepreneurs. We provide programming in Houston, TX, online, virtual, and US, United States.
© Copyright 2018-2021 STEM·E Youth Career Development Program™