How Webpages are Put Together

 

There are several technologies that can be involved in creating websites, but there are three major languages that stand out, as you will almost always need to work with them when creating websites; these languages are HTML, CSS, and JavaScript. HTML (Hypertext Markup Language) is the language that describes how a web page is structured and is also what ties everything together. CSS (Cascading Style Sheets) is the language that is used to design and style the HTML files (web documents) and is crucial to making your website look visually appealing. Finally, JavaScript is a front-end programming language that can be used for adding functionality and features to your website. All three of these languages have separate tasks but need to be connected together in order to have a functioning web page. Although, it can be quite confusing for beginners to understand how this is done, so we’ll be clarifying that here.

The HTML file can be thought as the center of your web page that holds is all together; in fact, you can even write all your CSS and JavaScript code inside of a single HTML file. However, I would highly recommend making separate files for your CSS and JavaScript for the sake of organization. In the same way that Microsoft Word documents end with the .docx extension, HTML, CSS, and JavaScript files also have extensions of .html, .css, and .js, respectively.  Here is the file structure that we will be using (all of our files are in the same folder):

An HTML document is made up of two main parts: the head and the body. The head is where you put meta tags, which describes information about the website itself (i.e., the character set that it uses such as UTF-8 or ASCII). The body contains all of the content of the HTML document. The head is where we link our CSS to our HTML document. We can do so by writing a link tag like this:

<link rel="stylesheet" href="styles.css" />

The rel attribute specifies the relationship between the current HTML documents and the linked document and the href attribute specifies the location of the linked file. To link the JavaScript file to our HTML document, we can add a script tag either in the head or body; however, it is more conventionally put it in the body. Here is the tag will look like:

<script src="script.js"></script>

 Here is how a typical barebones HTML document might look like:



Note that you can link as many CSS and JavaScript files as you want in a single HTML file. This web page does not actually do anything because it has no content on it, but it should serve as good demonstration and starting point to creating web pages.

Thanks for reading!

Comments

Post a Comment

Popular posts from this blog

Gratitude Blog 3

Image
  Gratitude Blog: Day 3 By: Helen Ruiz Today was a rainy day, which usually translates into me having zero motivation to do anything. However, I consider today as a very fun & productive day. In the morning, after finishing my accounting quiz, I was feeling a bit hungry. I didn’t know what to get, but my friends & I decided to go to Culver’s. I’ve never had Culver’s before, and I am grateful I got to try it out today. I got a Sourdough Melt & topped it off with an Oreo & salted caramel concrete mixer! During the middle part of the day, I was feeling awfully tired & could not find any energy to focus on another accounting quiz. Usually, I gain energy by simply singing/dancing to a good song or two. Therefore, I am very grateful my friends remembered this & we played a song on Just Dance off of YouTube. After some dancing in one of the classrooms in the science center, I had loads of energy & was able to power through my quiz.  Over the summer, we had...
Read more

Gratitude Blog: Day 4

Image
  Gratitude Blog: Day 4 By: Helen Ruiz It’s finally Friday, and although I didn’t realize this fact until around noon, during my accounting class, I am very grateful that we are done through week 12! Only one more month left of this semester- yay!! Today, we got our exam scores back in my Principles of Marketing class, and I was very grateful that my 6+ hours of studying paid off to get me the score I deserved. What I don’t think I deserved very much was walking out of the business building into very icy snow hitting my face.  I’m not a big fan of the cold, so this was a not-so-great characteristic of today. Nevertheless, it was something I could deal with.  As a first-year mentor, I have to spend a certain amount of money for students in my class. Another FYM and I created an event together. For our get-together, we decided to have Bundtinis from Nothing Bundt Cakes. When we went to pick them up, we ended up treating ourselves to our own mini-Bundt . I am so grateful we...
Read more

Two Minute Technology: Machine Learning

Image
Two Minute Technology: Machine Learning Any learning entity - be it an animal, human or a machine begins with an initial set of observations - raw data . This kind of data can stem from interactions, transactions, information exchange, examples, instructions or experiences. A brain - whether it belongs to a human or animal, tries to look for patterns inside that initial data and then uses it to perform actions or make decisions. This same phenomenon can be applied to machines, using machine learning. Machine learning is a subfield of Artificial Intelligence. According to Arthur Samuel, a computer scientist, machine learning gives computers the ability to learn without being explicitly programmed. Another computer scientist, Tom Mitchell, took the same details of machine learning, but broke it down further in his definition. I find Mitchell's definition more fitting to describe exactly what machine learning is. "Machine learning is a well-posed learning problem: a computer...
Read more