Your First Web Page. It all starts with an idea. Create an Azure Web App

Transcription

1 Your First Web Page It all starts with an idea Every web page begins with an idea to communicate with an audience. For now, you will start with just a text file that will tell people a little about you, a school club or a hobby you like. You will this text into the code editor even though you are just doing text. Create an Azure Web App First, you will need a place to store and show your content. In this course you will be using Microsoft's web servers in a service called Azure Web Apps. This service will allow you to use lots of different programming langauges like Java, Python and ASP.NET but in this course we are going to cover what is common across most web applications, HTML, CSS and JavaScript. We are going to start at the Azure portal. With your browser, navigate to and sign in if you need to. Go ahead and do that now and you should arrive at the portal home page. In the upper left corner, click the plus sign or "New" button (1) to create a new Azure resource.

2 In the Create blade that comes up, click the "Web + Mobile" (1) option and then select "Web App" (2) to begin creating a Web App resource for your website.

3 Next, in the "Web App" blade that comes up, we will enter a little bit of information about your website. First, you need a name for your website. The name will be created at ".azurewebsites.net". The name will need to be unique and you should get a green checkmark (1) when you have a valid web app name. Next, you will choose the subscription to be used for your Azure web app (2). The "App Service Plan" allows you to change what region your application is hosted in and the pricing tier for your website. You can change this if you want, but you can also change this later. For now, we will skip that. Finally, leave the checkbox "Pin to Startboard" checked and click "Create" (3) at the bottom of the blade to begin creating your new Azure Web App.

4

5 You will be taken back to the portal home page and a new tile will show that the web app creation is in process. Once your website is up and running, you can navigate to your Web App management blade by clicking on the tile on the home page. Once you are on the Web App management blade, you can click on the link to go to your website or you can just navigate to the name of your website. For example Since you haven't created any content yet, you should see a page that shows your web app was successfully created. There are a number of tools you can use to start publishing content to your new web application, but this course will use a web based tool called Visual Studio Online. This is a code editor that has some limited functionality, but it will certainly do everything you will need it to throughout this program. Setting up Visual Studio Online While you won't need to install any software on your computer, you will need to configure your new website to use Visual Studio Online as your editor. Go back to your Web App management blade.

6 Here you will click on the "Tools" icon to bring up the tools configuration blade.

7 In this blade, scroll down and click on the "Extensions" (1) item to open the Installed web app extensions blade. Click the "Add" icon (2) to add a web app extension.

8 In the "Add web app extension" blade, select "Choose Extension" (1) and in the "Choose web app extension", select Visual Studio Online. Click the "OK" button at the bottom of the "Accept legal terms" blade, then click the "OK" button at the bottom of the "Add web app extension" blade to complete the install of the Visual Studio Online extension. You should now see Visual Studio Online listed in the "Installed web app extensions" blade. If you click on the extension (1), the "Visual Studio Online" blade will open and you can click the "Browse" (2) icon to

9 open the Visual Studio Online tool. To make it easier to get back here in the future, click the "Pin to Startboard" icon in the top of the blade. Quick Tour of Visual Studio Online Now that you have Visual Studio Online up and running, it might be helpful to know what all the icons means. Below is a quick roadmap of the online code editor. (1) File Explorer - this is where you add, edit and save your project files. (2) Search - Want to find a piece of code? This is where you can search through all of your files at once. (3) Source control - if you were working on a team, this is where you would share your code with others. For this beginning course, we will not be using this. (4) Run - want to see what your website looks like? Click here to bring up your website in another tab of your browser. (5) Output - This is an output of what is going on behind the scenes. We won't use it much here, but sometimes it is helpful to see errors on the server when things are going right in the browser. (6) Console - This is a command prompt on the server. In some projects, you may find it necessary to install modules from the internet to get your project to run. In this beginning course, we won't need to use the console. (7) Go to file - Do you want to go to a specific file without having to browse through the file explorer?

10 (8) Working Files - These are the files you are working on most recently. They stay here for quick reference. (9) WWWROOT - this is the root folder where all your website files will be created and stored. Notice the first file "hostingstart.html" is created for you already and is the blue file that came up to show you the website was successfully created. Let's Get Your Website Started Enough setup! Let's get your first webpage out there for the world to see. First, you're not going to want the "hostingstart.html" to be displayed to the users of your website. Go ahead and delete the "hostingstart.html" file from the WWWROOT folder. Now let's create a new file in your website folder for the text of our web page. We'll do this by hovering the mouse over the WWWROOT folder name and clicking the icon that looks like a piece of paper with a plus sign (1). Name the file "index.html". Your Azure web app is preconfigured to look for "index.html" as the starting page of your website, so this will be the first thing people see when the land on your site. Really, you could call the page anything, but most websites have an index page as their first page, so it's a good idea to name your file this way. It's time to add some text to this file. Add the following text to your page. You could add your own text, but this is the text we will be referring to for the rest of this tutorial. Visit Anytown, USA! Things to Do Hiking Biking Horseback

11 Backpacking Amazing Museums While most museums are a collection of old artifacts and stuff that no one is really interest You won't find anything like these any where else in the world. Our museums rival that of our Come check them out...the fun is waiting for you. SplashAnyone Waterpark Our waterpark is the biggest and best park in the Western World. Just south of interstate 201 If that wasn't enough, we have 376 of the best food trucks in the state serving everything fr And we wouldn't be SplashAnyone without the rules about splashing... wait there are no rules Best Zoo in Town Finally, you won't want to miss out cuddly little zoo animals. Lions, tigers and bears...oh M How to Get Here By Plane By Train By Automobile By Boat Visual Studio Online will automatically save your work for you. If you click the "Run" button now, a new tab should open in your browser and show your web page. So far, all we have is a little text so it won't look very nice, but should look something like this.

12 Let's Add Some Formatting So we have plain text and it doesn't look very nice right now in the browser. That's because the browser was made for HTML or Hyper Text Markup Language. This is just a way to put extra text in our plain text that tells the browser program how it should show our data...that's the Markup. The Hyper Text was a method developed for creating and linking content where the reader can jump to other related content quickly. Were are going to start with just giving our text a way to look formatted a little nicer in the browser. We'll add some of the linked content in the later modules of this course. First, let's tell the browser that the document that we are working with is going to be an HTML document. We'll do that by putting the following code at the beginning of our file. <!doctype html> Visit Anytown, USA! Things to Do Hiking... Most browsers will assume that it is HTML without this, but it's never a bad idea to set the expectation for the browser to view your file as HTML. Next, we need to tell the browser where the HTML starts and stops. We do this by using tags. Tags always come in pairs of opening and closing tags. Opening tags look like this <html> and closing tags look like this </html>. Let's put these at the top and bottom of your web page now. <!doctype html> <html> Visit Anytown, USA! Things to Do Hiking... By Automobile By Boat </html> There are two parts of an HTML page. There is the <head> which has some information that is descriptive of your page and then the <body>. The <body> is the main content of your page and how it should be displayed.

13 Let's add those tags now. We don't have any <head> content just yet, so we will just put in a blank set of tags. We'll come back and add more interesting stuff in a minute. The rest of the content we will surround with the <body> tags. <!doctype html> <html> <head></head> <body> Visit Anytown, USA! Things to Do... By Automobile By Boat </body> </html> Next, we want to set a number of the lines to be "header" lines. We do this with tags <h1>, <h2>, and so on to <h6>. Each "header" tag will be formatted differently. You can think of these as "chapters", then "topics", then "subtopics", etc. The top most level is <h1>. While we are at it, we want to mark the paragraphs of text with a <p> tag. This helps the browser to format these as individual paragraphs rather than creating one long block of text. <!doctype html> <html> <head></head> <body> <h1>visit Anytown, USA!</h1> Things to Do Hiking Biking Horseback Backpacking <h2>amazing Museums</h2> <p>while most museums are a collection of old artifacts and stuff that no one is really i <p>you won't find anything like these any where else in the world. Our museums rival that <p>come check them out...the fun is waiting for you.</p> <h2>splashanyone Waterpark</h2> <p>our waterpark is the biggest and best park in the Western World. Just south of interst <p>if that wasn't enough, we have 376 of the best food trucks in the state serving everyt <p>and we wouldn't be SplashAnyone without the rules about splashing... wait there are n <h2>best Zoo in Town</h2>

14 <p>finally, you won't want to miss out cuddly little zoo animals. Lions, tigers and bears How to Get Here By Plane By Train By Automobile By Boat </body> </html> Open your file in a browser now, it should look a little nicer. Notice that the <p> tags keep the text from just looking like all one paragraph. Another way to view your work is the preview pane. First click the "Split Window" icon and then click the "Open Preview" icon. The split screen should look like this and give you a live view of your code.

15 Adding the Lists Finally, we have two lists we want to work with. In HTML, we have two types of lists: Ordered and Unordered. An ordered list puts a numeric value at the beginning of each list item where unordered lists use a graphic symbol to mark each list item. To create an ordered list, we use an <ol> tag and for an unordered list, we use an <ul> tag. For both lists, each individual list item is marked with an <li> tag. <h2>things to Do</h2> <ul> <li>hiking</li> <li>biking</li> <li>horseback</li> <li>backpacking</li> </ul> <h2>how to Get Here</h2> <ol> <li>by Plane</li> <li>by Train</li> <li>by Automobile</li> <li>by Boat</li> </ol> Let's give your page a title Remember that <head> tag we put in early on. Let's go back and add another tag to tell your browser what to display in the window or tab title. This will help us know which window is your web page. This time we are going to insert a <title> tag to the <head>. There are other things we can put in the <head> tag, but for now this is all we are going to do. <head> </head> <title>my First Web Page</title> Finally, save your work and open the page in a browser. Congratulations, you turned a simple text file into an HTML file. You are now ready to move on and learn how to add some more style and flair to your web page.