So where do we begin? All the way at the beginning of time! 13.8 billion years ago, the universe was created in what is indubiously known as The Big Bang.
Well maybe we don't have to go that far back. Let's just start with where this HTML thing came from.
HTML (also known as Hyper Text Markup Language) has been around for a little while if you are not familiar with it. It is the standard for structure of a web page. It is part of a set of 3 technologies that define our standards for the Web (or World Wide Web, www). The other 2, CSS and JavaScript, we will cover at a later date. But this HTML thing is the basis of building our web page or application. This is how your browser knows what to show you and where on the screen.
Great, so this 4 letter acronym tells the internet how to render a page. How does the browser read it? What is the structure that makes it so friendly?
Tags!
<yes>
HTML uses predefined tags to construct a web page. There are some very key tags for you to know. The first 3 for defining a website structure are <html>, <head>, and <body>. But even before that you need the document type declared
The <!DOCTYPE html> tag is how you open a web page. This should be the first. This is the first line a browser reads to know that it is in fact reading an HTML document. Everything after that is just structure.
Most tags need to be opened and closed. A closing tag generally consists of the tag with a backslash at the beginning of the word. For example <html> </html> are the open and closing tags for HTML. There are a few exceptions to this rule, but for now, assume all tags must be opened and closed in this manner.
Alright, so let's get coding right? Open up a code editor, like Atom or Notepad++. We're going to start local.
So, what's the first thing we need to create a web page?
That's right, document type declaration!
Now let's define the basic structure using the 3 tags I mentioned earlier, HTML, head, and body.
So the HTML tags tell the browser where to start looking for the structure of the page. The head tags contain all our information about the page that isn't directly visible to the user. This is things that are used for search engines, bookmarks, etc. You will define the page name that appears in the tab on the page here, and that's all we'll really be able to see. You can also define reference scripts and files here as well, which we will learn more about next week.
The body tag is where all the user visible stuff is. If you've seen some html tags like <h1> or <p> or <a href...>, all this goes in the body (generally speaking) to define how the page looks to the user. For our purposes, we'll say this defines all the structure and formatting for the page, but in subsequent weeks, you will see how this will change.
Let's give the page a title and some quick text, and then we'll look in our browser.
In between the opening and closing <head> tags, define a title.
In between the opening and closing <body> tags, add some text. For now, we won't add tags. Just plain old text.
Save your file and name it index.html.
Now why do we name our file index?
Because this is the default file name when entering a domain (unless otherwise specified - to be covered later). Let's parse a url real fast. So in a url like this one https://www.sap.com/community.html the file name is explicitly mentioned. We want the community.html file to be shown. However, if we remove community.html from the url, what page do we show? Which file should be loaded? Do it! What happens? We are directed to https://www.sap.com/index.html. We name our home file index.html because if no file name is specified, the browser interprets this to be index.html. You can overwrite this redirect, but for now, we'll leave the browser's default rules in place.
So once you have saved you file, you can double click it and it will open in your browser.
Not too exciting yet, but see how the tab is named the same thing as what we defined in the title tag? And our page just has the plain text we put on the page? Now that we have an idea of how these tags render on screen, let's make some adjustments to our page.
Back in your editor, let's add some formatting to the body.
Add a title using the <h1> tags. These are header tags, and header levels can go all the way from 1 (top level) to 6. The larger the level number, the less important the header is one way to look at it.
And then, wrap your plain text in a pair of <p> tags. This will define this as a new paragraph. This is a useful tag for breaking up text as it adds natural new lines and spacing to our page.
Make sure to save, then refresh your page in the browser.
If you want to add links, this is where the <a> tag comes in. <a> tags are anchors. You can use them to jump around on the page (like "Jump to the bottom", "back to the top" links you might see), or they can be external references. Let's make a link to our SAP People profile. We define the place to go via the href property inside the tag definition. I am going to add a second property called target, which specifies where to open the new page. In this case, I want it to be a new tab so I use _blank.
Save the changes, and refresh the browser.
Click on the link. This will open a new page with your SAP People profile.
There are plenty of great resources about developing using HTML, but it's not really the standard for building a page or application these days. I wanted to spend some time covering the basic building blocks before we dive into some of the more dynamic pieces of building a web application. It is important to understand how a page is constructed before we go too far down the rabbit hole. So feel free to explore W3Schools introduction to HTML if you want to learn more, but this is a good foundation for building a web page.
Next week, we will take a look at CSS to explore how you stye of a web page.
Well maybe we don't have to go that far back. Let's just start with where this HTML thing came from.
HTML (also known as Hyper Text Markup Language) has been around for a little while if you are not familiar with it. It is the standard for structure of a web page. It is part of a set of 3 technologies that define our standards for the Web (or World Wide Web, www). The other 2, CSS and JavaScript, we will cover at a later date. But this HTML thing is the basis of building our web page or application. This is how your browser knows what to show you and where on the screen.
Great, so this 4 letter acronym tells the internet how to render a page. How does the browser read it? What is the structure that makes it so friendly?
Tags!
<yes>
HTML uses predefined tags to construct a web page. There are some very key tags for you to know. The first 3 for defining a website structure are <html>, <head>, and <body>. But even before that you need the document type declared
The <!DOCTYPE html> tag is how you open a web page. This should be the first. This is the first line a browser reads to know that it is in fact reading an HTML document. Everything after that is just structure.
Most tags need to be opened and closed. A closing tag generally consists of the tag with a backslash at the beginning of the word. For example <html> </html> are the open and closing tags for HTML. There are a few exceptions to this rule, but for now, assume all tags must be opened and closed in this manner.
Alright, so let's get coding right? Open up a code editor, like Atom or Notepad++. We're going to start local.
So, what's the first thing we need to create a web page?
That's right, document type declaration!
<!DOCTYPE html>Now let's define the basic structure using the 3 tags I mentioned earlier, HTML, head, and body.
<html>
<head>
</head>
<body>
</body>
</html>So the HTML tags tell the browser where to start looking for the structure of the page. The head tags contain all our information about the page that isn't directly visible to the user. This is things that are used for search engines, bookmarks, etc. You will define the page name that appears in the tab on the page here, and that's all we'll really be able to see. You can also define reference scripts and files here as well, which we will learn more about next week.
The body tag is where all the user visible stuff is. If you've seen some html tags like <h1> or <p> or <a href...>, all this goes in the body (generally speaking) to define how the page looks to the user. For our purposes, we'll say this defines all the structure and formatting for the page, but in subsequent weeks, you will see how this will change.
Let's give the page a title and some quick text, and then we'll look in our browser.
In between the opening and closing <head> tags, define a title.
<title>My web page</title>In between the opening and closing <body> tags, add some text. For now, we won't add tags. Just plain old text.
Save your file and name it index.html.
Now why do we name our file index?
Because this is the default file name when entering a domain (unless otherwise specified - to be covered later). Let's parse a url real fast. So in a url like this one https://www.sap.com/community.html the file name is explicitly mentioned. We want the community.html file to be shown. However, if we remove community.html from the url, what page do we show? Which file should be loaded? Do it! What happens? We are directed to https://www.sap.com/index.html. We name our home file index.html because if no file name is specified, the browser interprets this to be index.html. You can overwrite this redirect, but for now, we'll leave the browser's default rules in place.
So once you have saved you file, you can double click it and it will open in your browser.
Not too exciting yet, but see how the tab is named the same thing as what we defined in the title tag? And our page just has the plain text we put on the page? Now that we have an idea of how these tags render on screen, let's make some adjustments to our page.
Back in your editor, let's add some formatting to the body.
Add a title using the <h1> tags. These are header tags, and header levels can go all the way from 1 (top level) to 6. The larger the level number, the less important the header is one way to look at it.
And then, wrap your plain text in a pair of <p> tags. This will define this as a new paragraph. This is a useful tag for breaking up text as it adds natural new lines and spacing to our page.
<body>
<h1>All about Meredith</h1>
<p>Here is some text.<p>
<p>And then I added more that I want to be in a new paragraph. </p>
</body>Make sure to save, then refresh your page in the browser.
If you want to add links, this is where the <a> tag comes in. <a> tags are anchors. You can use them to jump around on the page (like "Jump to the bottom", "back to the top" links you might see), or they can be external references. Let's make a link to our SAP People profile. We define the place to go via the href property inside the tag definition. I am going to add a second property called target, which specifies where to open the new page. In this case, I want it to be a new tab so I use _blank.
<a href="https://people.sap.com/meredith.hassett" target="_blank">Meredith's Profile</a>Save the changes, and refresh the browser.
Click on the link. This will open a new page with your SAP People profile.
There are plenty of great resources about developing using HTML, but it's not really the standard for building a page or application these days. I wanted to spend some time covering the basic building blocks before we dive into some of the more dynamic pieces of building a web application. It is important to understand how a page is constructed before we go too far down the rabbit hole. So feel free to explore W3Schools introduction to HTML if you want to learn more, but this is a good foundation for building a web page.
Next week, we will take a look at CSS to explore how you stye of a web page.
- SAP Managed Tags:
3 Comments
| User | Count |
|---|---|
| 5 | |
| 3 | |
| 2 | |
| 2 | |
| 2 | |
| 2 | |
| 1 | |
| 1 | |
| 1 | |
| 1 |
