—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: 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