HOW Do You Make A Webpage???

WEBPAGES, WEBPAGES, WEBPAGES

Many people turn on their computer, click on their browser and "WHOALA," a webpage appears on their screen. Have you ever wondered how webpages are made? How do you make a picture the size that it is, or have a word be one color and the rest of the words another color?

What about font size? How is that done?

First, let's talk about the language you need to learn to create a webpage.

Enter: HTML

HTML stands for Hyper Text Markup Language. It is the standard markup language for creating webpages, it describes the structure of a webpage, and the HTML elements tells the browser how to display its content.

What is a markup language? A markup language is a human readable computer language that uses tags to define elements within a document.

What is an HTML element? An HTML element usually consists of a start tag and an end tag with the content inserted in between.

Here is an example of an HTML element:

In order to make a website, HTML code needs to be written in a text editor. See the picture below for an example of an html file that has been written in Sublime Text Editor.

The first line calls out what kind of language the document is written in. As you can see, it is in the HTML language.

On line 2, you see the <html> root element.

HTML is like XML in that it is structured in a tree form. There are branches and leaves as well as parents, children, siblings, etc.

EXAMPLE:

In the photo above, locate the <body> tag.
Under that, there is an <h1> tag. That <h1> tag is a child of the <body> tag.
Directly under the <h1> tag, there is a <p> tag. That <p> tag is also a child of the <body> tag AS WELL AS a sibling to the <h1> tag.
The text that follows the <h1> tag, "HELLO WORLD!" - that is a child of the <h1> tag. The sentence below the <p> tag is a child to the <p> tag.

Take a look at the picture below:

Photo Credit and a detail description of this photo can be found here.

Do you see how parent, child, sibling works in HTML? Can you also see how it can look like a tree structure? The trunk of the tree is <html>, where the branches meet the trunk is the <body> and all of the different branches and leaves are the different element tags and their children that are found within the body.

Stay tuned for the next post where we get into some of the basic element tags used in HTML.

Follow me as I learn to build my website bit by bit! IronTreeDev.com

Photo by Igor Miske on Unsplash

Comments

XPATH and XPATH Expressions In XMLLINT

XPATH And XPATH Expressions Earlier, I told you about xmllint and xmllint for html files . Let's say you just want to parse the <span> tags within your html file or just your <span lang="el"> tags? Enter: Xpath. Xpath is yet another option available within the xmllint language. Remember, an Xpath is used to navigate through elements and attributes in xml and html documents. Xpath uses Xpath Expressions to select nodes or node sets within a document. Example 1 . Looking for all of the <span> tags within an html document. xmllint -- html -- xpath " // span" StedmanLesson10.html xmllint = This tells the command line that we are going to be using the xmllint language. space = because we always have space in between commands -- = Remember, these are the two hyphen-minus characters that we need to tell the command line that we are going to use an xmllint option. html = This is the xmllint option we want to

Back To The Basics

Click photo above to see photo clearly It's Been A LOOONG Minute since I have coded!! Even so, I decided to give JavaScript another try. I always seem to do good and then when I get to this one area, I always seem to hit a brick wall. Well....nothing like getting back up and trying again right? I decided to try Rithm School's online JavaScript Fundamentals FREE course . I have never joined their school but their free courses tend to explain things in a way my brain understands it. 💁 To let you know how much I have forgotten in the coding world, I couldn't even remember how to write the basic commands for an HTML document! Yesterday I started the fundamentals free course and I am so glad that I did. Because of time, I only made it through the JavaScript History and Setup chapter, but that chapter was enough to get my memory flowing again! It started to feel familiar and I quickly remembered why I enjoyed coding so much. Yesterday and this morning, I just erased

GIT Commands: Pull, Add, Commit, Push.....and sometimes Revert

Pull, Add, Commit, Push ...... then Repeat We talked about GIT, GIT Hub , and the three different areas GIT works in. Now it is time to talk about some of the most used GIT commands. I am currently working with a team on a project called Stedman. We are all using the GIT Hub server to track our work as we make changes to the files within the Stedman project. Many changes can be made by other members of the team, from the time I sign off to the time I sign back on. How do I get the changes they made to a file I need to work on, onto my computer? ENTER GIT COMMANDS : 1. The first thing I do is goto my command window on my computer and navigate to the directory where the file I want to work in is located (this will be a directory that is being tracked by GIT). *If you need a quick refresher: cd file_name will take you through each of your directories until you reach your desired location. Issuing an ls command will list the files (sub-di

IronTree Dev

List of My Topic Pages Below:

Search This Blog