Csdn.net will release an advanced tutorial on Microsoft's new Web development tool WebMatrix in the near future. This will help developers understand the most powerful Web development tool in Microsoft's history. After installing and using Microsoft's new development tool WebMatrix last released and teaching you how to use WebMatrix to create the first web page. We will continue to introduce you to the next tutorial.
Microsoft WebMatrix is a free tool for creating, customizing, and publishing websites on the Internet.
WebMatrix allows you to easily create websites. You can start with an open-source application (such as WordPress, Joomla, DotNetNuke, or Orchard) and WebMatrix will process the tasks of downloading, installing, and configuring these applications for you. Alternatively, you can use many built-in templates to write your own code. These templates help you get started quickly. No matter what you choose, WebMatrix provides everything you need to run your website, including Web servers, databases, and frameworks. By using the same stack on your development desktop as that on your Web host, you can easily and smoothly launch your website.
You can download a token from http://web.ms/webmatrix.
Now you only need a few hours to learn about WebMatrix, CSS, HTML, HTML5, ASP. NET, SQL, database, and how to write simple Web applications. The content is as follows:
In section 2nd, you can see how to use WebMatrix to create a very simple web page and how the page runs in a variety of different browsers. In this section, you will learn how to change the visual style of a webpage, using Cascading Style Sheets (CSS) technology.
Here is the simple movie list built into your webpage:
Use Cascading Style Sheets to prepare and set webpage styles
In the next few steps, you will see more HTML tags, which can be used for functions such as hyperlinks, web page partitions, and script tags, you will also learn how to use Cascading Style Sheets (CSS) to edit the webpage and set its appearance. Finally, the layout will be used to obtain the same content between the webpage and other webpages on the website, so that you can easily edit the same content.
Use Separator
In HTML, you can use the <div> tag to logically divide webpages into several parts. This is especially useful when you view styles later in this article. You can specify the styles of a part of a webpage by setting the corresponding div.
Here is the HTML Of Your webpage in the first part:
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "UTF-8"/>
<Title> My Favorite Movies </title>
</Head>
<Body>
<H1> A list of my Favorite Movies <Ol>
<Li> Its a wonderful life </li>
<Li> Lord of the Rings </li>
<Li> The Fourth World </li>
<Li> The Lion King </li>
</Ol>
</Body>
</Html>
The first thing to do is wrap the list of movies in its own <div>, as shown below:
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "UTF-8"/>
<Title> My Favorite Movies </title>
</Head>
<Body>
<H1> A list of my Favorite Movies <Div id = "movieslist">
<Ul>
<Li> Its a wonderful life </li>
<Li> Lord of the Rings </li>
<Li> The Fourth World </li>
<Li> The Lion King </li>
</Ul>
</Div>
</Body>
</Html>
You can now see that the <ol> <li> list containing movies is now included in the <div> tag. If you view this webpage, you will find that it is no different from the previous one. This is because the <div> mark is a logical separator. It does not have any physical appearance.
Use hyperlinks
You may already be familiar with hyperlinks-clickable areas that link to another page on one page. Although these areas are called hyperlinks, they are originally called positioning tags (anchor) in HTML, so you can use the <a> tag as long as you want to create a hyperlink.
<A> (or locate) the content between <a> and </a> can be clicked. When you click this content, the browser redirects to an href (superreference) indicated by the HREF attribute in the <a> tag ).
Attributes are defined on the tag itself, rather than in the tag, similar:
<Tag attribute = "attributevalue"> content </tag>
Therefore, to create a hyperlink, you can use the following syntax:
<A href = "http://www.microsoft.com"> Click Here </a>
Href does not need to be a website like the above, or a JavaScript function that executes the operations used by programmers. A special href can be used as a placeholder During Development so that you can test whether the hyperlink style is valid. Therefore, the "#" character is used as the href.
Therefore, to convert all <li> items that contain movies into hyperlinks, we wrap the movie text in the <a> tag and set HREF to #, similar to the following form:
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "UTF-8"/>
<Title> My Favorite Movies </title>
</Head>
<Body>
<H1> A list of my Favorite Movies <Div id = "movieslist">
<Ol>
<Li> <a href = "#"> Its a wonderful life </a> </li>
<Li> <a href = "#"> Lord of the Rings </a> </li>
<Li> <a href = "#"> The Fourth World </a> </li>
<Li> <a href = "#"> The Lion King </a> </li>
</Ol>
</Div>
</Html>
If you run the web page, you will see that the elements on the list will use the familiar hyperlink style, that is, the so-called Blue underline:
Add a header and footer
The next thing to do is to add a header and footer to the webpage. You will use the new
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "UTF-8"/>
<Title> My Favorite Movies </title>
</Head>
<Body>
<Header>
<H1> A list of my Favorite Movies </Header>
<Div id = "movieslist">
<Ol>
<Li> <a href = "#"> Its a wonderful life </a> </li>
<Li> <a href = "#"> Lord of the Rings </a> </li>
<Li> <a href = "#"> The Fourth World </a> </li>
<Li> <a href = "#"> The Lion King </a> </li>
</Ol>
</Div>
<Footer>
This site was built using Microsoft WebMatrix.
<A href = "Download> http://web.ms/webmatrix"> Download it now. </a>
</Footer>
</Html>
As you can see, they are very simple HTML code.
For the header, we wrap the previously created
View a webpage in a browser. It is now similar to the following interface:
Except for the footer, there are not many differences, but don't worry. This situation will change soon!
Define the appearance of a webpage
In the previous section, you learned about attributes and attributes to describe the behavior of elements when introducing positioning tags. For positioning tags, you specify the HREF attribute to define the actions that occur when you click the tag.
As you can imagine, you can use attributes to specify the appearance of an element, including the font style, font size, color, and border.
For example, you can change the font and color of the
<H1 style = "color: blue; font-size: 32; font-family: Verdana; text-decoration: underline"> A list of my Favorite Movies
As you can see, the
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
