Tuesday, 21 July 2015

Web Designing Tutorials(Sitemaps)

A sitemap is a list of all the pages on your web site. In addition, a sitemap can list other resources on a page, such as images and videos. You can also add information about how often a page is updated and when it was last changed. A site map can be submitted to search engines, and ensures that all the pages are referenced and crawled.
You can create a sitemap yourself using XML, but this is very complex and time consuming. The easiest way to create one is via free sitemap generators. Here are two such sites:
Once your sitemap is generated you’ll have an XML file that you can upload to your web space. Place it in the same folder as your index.html web page – the root folder, in other words.

Web Designing Tutorials(Pay Per Click Advertising)

If you can’t wait for the search engines to crawl and rank your site, then you can sign up for something called pay-per-click advertising. As its name implies, this is when you pay for somebody clicking on your advert and then coming to your site. The market leader here is Google’s Adwords. When you sign up for an Adwords account, you get to bid on keywords and phrases. You decide how much you are willing to pay per click, say 20 cents. You then write a few words of copy for your ad (“Thousand of Black Widgets on Sale”). Your ad will appear on the right of the search engine results in Google. You can also pay a premium and have your ads appear at the top of the page, inside a coloured background.
Google is not the only game in town, here. Microsoft’s Bing and the Yahoo search engine have teamed up to run a pay-per-click campaign called AdCenter. This is more-or-less the same as Google’s Adwords, except your ad will appear on Bing and Yahoo’s search results.

Web Designing Tutorials(Search Engine Optimisation)

In this section we’ll take a look at what you should do to get your web site recognised by search engines. However, bear in mind that the goal of a good web page is quality. You should not be writing your articles for search engines but for people. If you care about what you’re saying and care about your audience then this will be far superior to someone just trying to make a fast buck.

META tags

A category of HTML tags that you can add to the HEAD section of your web pages are META tags. META is short for METADATA, which means information about the data on your web page. An example is this:
<META NAME=”description” CONTENT=”Widgets for all occasions.”>
This META tag has the attributes NAME and CONTENT. The NAME attribute can take a lot of values, but it is used in conjunction with the CONTENT attribute. In the example above, the CONTENT is describing what the web page is about. Because the CONTENT is a description of the page, the NAME value is “description”.

Web Designing Tutorials(What to look for when buying Web Space)

The websites of Web Hosting companies can be a minefield of jargon. Here are some of the things to look out for
Disk Space
This is how much space you get on the hosting company’s server. Obviously, the more the merrier, here. But it’s highly unlikely that you’ll need a Gigabyte of disk space, unless your web site contains lots of large images or videos. But the average site won’t even be 50 megabyte in size never mind 500 megabytes. So don’t just base your decision on Disk Space.
Data Transfer
This refers to how much download activity occurs on your site each month. (Data Transfer is also known as Bandwidth.) Say, for example, that each page on your site is 10 kilobytes in size (pretty small, these days). If 1000 visitors come to your site each day they will be downloading 10, 000 kilobytes of data, or 10 megabytes. Multiply that by the number of days in a month and the data transfer will be about 300 megabytes a month. If the Web Hosting company you sign up for only allows 100 megabytes of traffic each month then they will cut you off when that limit is reached. Your site will then be down until next month.

Web Designing Tutorials(Websites and Domain Names)

To get your site on the internet you’re going to need some web space. For most people, and certainly beginners, this means something called Shared Hosting. What you’re basically doing here is renting a folder on somebody else’s server. That “somebody else” will be a Web Hosting company who either own the servers themselves or are acting as a middleman for the company that owns the server (called a reseller).
The size of the folder you get on the server will vary, but is typically between 500 megabytes to a Gigabyte. This is usually more than enough. In fact, 100 megabytes is usually more than enough. If, for example, each web page on your site is 10 kilobytes, a 100 megabytes means that you will have room for about 10, 000 pages.

Web Designing Tutorials(The Details, Aside, and Mark tags)

The HTML 5 Details Tag

The details tag allows you to add extra information that can be viewed or hidden. For example, take a look at the image below:
The details tag in a browser
When a user clicks the above message, the following information is revealed:
The details tag expanded when clicked on
Clicking the summary will hide the above message.
The Details tag is used like this:

Web Designing Tutorials(The HTML 5 Canvas Tag)

One tag new to HTML5 is the Canvas tag. The Canvas tag is a blank space on which you can draw anything you like. You can add images to a Canvas, animate your shapes, add text, and a whole lot more besides.
To get the most out of the Canvas tag, however, you need to be able to code using Javascript. Another disadvantage is that not all browsers support the Canvas tag, especially versions of Internet Explorer below version 9. You can, however, write some quite sophisticated browser apps and games using just the Canvas tag and Javascript, and all without plug-ins like Adobe’s Flash. To get an idea of the things you can do, take a look at these pages:

Web Designing Tutorials(HTML 5 Video and Audio)

HTML5 introduced a new tag for videos. To insert a video into your web page you can now do this:
<VIDEO SRC=”your_video.mp4″></VIDEO>
This simplifies things greatly, as previously you had to use the OBJECT and PARAM tags. Even with a YouTube video that code would look messy:
<object width=”” height=””>
<param name=”movie” value=”http://www.youtube.com/v/your_ref”></param>
<param name=”allowFullScreen” value=”true”></param>
<param name=”allowscriptaccess” value=”always”></param>
<embed src=”http://www.youtube.com/v/your_ref_here” type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”” height=””></embed>
</object>

Web Designing Tutorials(Laying out your HTML Forms)

Aligning form elements can be very tricky. You might think CSS would make life easier, but it doesn’t. You can use the CSS position property with the values static, relative, absolute, and fixed. But even then, after long hours of frustration, you’d find that not all browsers render your form correctly.
To position form elements, then, a Table is often used. Take a look at the web page we’ve created called form_layout.html. This is in the extra_files/layouts folder that came with this book. (If you haven’t got the extra files yet, the download location is here, under the heading Web Design – New Course : (You don’t need the downloads for the old course.)
When you open up the above page, you’ll see a form that looks like this:

Web Designing Tutorials(Data Lists in HTML 5)

Another type of list you can use is a Data List. This is new in HTML5. The Data List is like a drop down list of options, only the dropdown part doesn’t appear until you start typing. The items on your list then appear, allowing the user to select an item. It is only supported in Firefox and Opera, at the time of writing. Here’s what it looks like before you start typing:
An HTML 5 data list
So it looks like just a normal text box.

Web Designing Tutorials(Dates, Times, Color Picker)

Dates and Times

You can have a calendar appear when a user clicks inside of a text box. Unfortunately, only the Opera browser does this. Here’s what it looks like:
An HTML 5 popup calendar
Being able to select a date like this is a terrific innovation that hopefully other browsers will implement in the future. The HTML for the 

Web Designing Tutorials(Spinners and Sliders)

Two other HTML5 controls you can add to forms are spinners and sliders. Sadly, though, only Opera and Chrome support the spinner. A spinner allows you to increase or decrease a number in a box by clicking little up and down arrows. They look like this in the Opera browser:
An HTML 5 spin box
The HTML code for the spinner box looks like this:
<INPUT TYPE=”NUMBER” MIN=”0″ MAX=”10″ STEP=”2″ VALUE=”6″ SIZE=”6″>

Web Designing Tutorials(The Email, URL, and Search text boxes)

HTML5 introduces an email text box. This text box checks for a valid email address. Instead of TYPE=”Text” you use TYPE=”Email”. Here’s the code to try:
<FORM>
<INPUT TYPE=”Email” PLACEHOLDER=”Enter your email address”>
<P>
<INPUT TYPE=”Submit” VALUE=”Submit”>
</FORM>
An older browser that doesn’t recognise TYPE=”Email” will just display a normal text box. So you may as well use the new email TYPE right now, if you need to.

Web Designing Tutorials(Password Boxes, The Hidden Element)

Password Boxes

You can add a password box to your form. This is identical to a text box in its appearance. The only difference is that when you type in the box the characters are replaced by asterisks ( * ). It’s important to remember that although a password box hides the text from prying eyes, the data is not encrypted in any way. If you use METHOD=Get instead of Post, the password would show up in the address line of the browser.
The code for a password box is this:
<INPUT TYPE=”Password” SIZE=”20″ MAXLENGTH=”8″>
The MAXLEGTH attribute is the maximum number of characters that can be entered into the password text box. SIZE is how wide you want the password box to be

Web Designing Tutorials(The Placeholder and Required Attributes)

The PLACEHOLDER attribute

There’s quite a neat new attribute you can add to your text boxes called PLACEHOLDER. This is default text that disappears when you click inside a text box. Try the following:
<FORM>
<INPUT TYPE=”Text” PLACEHOLDER=”Enter your first name”>
<P>
<INPUT TYPE=”Submit” VALUE=”Contact Us”>
</FORM>
The word PLACEHOLDER does not have to be in capitals, as like just about every HTML element it is not case sensitive. After an equal sign, you type the text you want to appear in your text box, surrounded by quotation marks.

Web Designing Tutorials(HTML 5 Form Elements)

Now that you have learnt about HTML form elements in versions prior to HTML5, it’s time to learn what’s new. And there are quite a lot of exciting new features you can implement. It doesn’t make sense not to implement them right now, as in most cases you’ll just get a plain old text box if a browser doesn’t support the new element. The HTML 5 elements and attributes we’ll explore are:

Read More...

Web Designing Tutorials(Password Boxes, The Hidden Element)

Password Boxes

You can add a password box to your form. This is identical to a text box in its appearance. The only difference is that when you type in the box the characters are replaced by asterisks ( * ). It’s important to remember that although a password box hides the text from prying eyes, the data is not encrypted in any way. If you use METHOD=Get instead of Post, the password would show up in the address line of the browser.
The code for a password box is this:
<INPUT TYPE=”Password” SIZE=”20″ MAXLENGTH=”8″>
The MAXLEGTH attribute is the maximum number of characters that can be entered into the password text box. SIZE is how wide you want the password box to be.

Web Designing Tutorials(Labels, Textareas)

You can add labels to your form, and attach them to a specific text box or other form element. They are good when you have small elements like check boxes, as you can click on the label to select the check box.
To add a label a pair of LABEL tags are used:
<LABEL>Label Text Here</LABEL>
The text you want to go on the label goes between the two tags.
To attach a label to a particular form element the FOR attribute is used, followed by the ID of the form element you want to attach it to. For example, examine the code below:

Web Designing Tutorials(Formatting Textboxes with CSS)

You can use some CSS to format your text boxes. Add the following LINK to the HEAD section of your HTML code:
<LINK REL=Stylesheet TYPE =”text/css” HREF=”../css/forms_1.css”>
Create a new CSS page and save it to the correct folder. For the file name type forms_1.css. We saved our HTML page in a folder called pages. We have a CSS folder that is one folder up from this, and so saved our CSS file there. That’s why our HREF reads “../css/forms_1.css”. This means, “Move one folder up from where the HTML page is, and look for a folder called css. Then use the CSS script called forms_1.css.”
For the CSS, type the following:

Web Designing Tutorials(Text boxes, Submit and Reset Buttons)

The INPUT Tag and Text Boxes

For most form elements, the word INPUT is used to set up the element. Next, you type a space followed by the word TYPE. This tells the browser what type of form elements to draw on your page. If you want a text box, the TYPE to use is “Text”:
<INPUT TYPE = “Text”>
(Notice that there is no end tag for INPUT.)

Web Designing Tutorials(HTML Form Elements – The Form Tags)

HTML forms are a way of gathering data from visitors to your page. Forms typically have text boxes for data input, radio buttons, drop down boxes, and buttons so that users can submit the form. A reset button is also handy, just in case mistakes are made filling out the form.
For this section, create a new web page in your text editor. Save the file as forms.html. We’ll add the different form elements as we go along.

Web Designing Tutorials(HTML5 Tables)

With HTML5, tables got a bit of a makeover in terms of structure. Take a look at the following code:
Code for a table in HTML 5

Web Designing Tutorials(HTML tables: cell alignment, colours, images)

Aligning contents in a cell

You can align the contents in a cell, so they look more presentable. To align a cells contents, the ALIGN attribute is used in the TD part of the tag. To centre-align our headings, the code would be this:




CSS Property


Internet Explorer


FireFox


Chrome


Safari


Opera




The other two Horizontal alignment options are “Left” and “Right”.

Web Designing Tutorials(The ROWSPAN and COLSPAN Attributes)

Suppose you wanted a table like this one:
An HTML table showing example of COLSPAN
Here, the two cells at the top stretch across the two cells below it. For a complex table of different cell size like this, you can use ROWSPAN and COLSPAN. This can get quite complex. But remember that Columns go down, and Rows go across. To have one big cell stretch horizontally across two smaller cells, the code would be this:

Web Designing Tutorials(HTML Tables and the TABLE tags)

Tables were introduced to HTML as a way to make textual data look more presentable on the screen. Things like statistics could be presented in neat rows and columns, making them easier to read.
Tables can also be used for web pages layouts, but the practice is now frowned upon. Some people even have a pathological hatred for layouts using tables. Don’t let this put you off, however. Using tables for layouts can actually be easier than using CSS! We won’t be using tables for web page layouts, though, but simply to present tabular data.

Web Designing Tutorials(A Two Column Layout Using HTML5 and CSS)

For the two-column layout, there is a HTML page and a CSS script already created for you. The HTML page is in theextra_files/layouts folder that came with this course, and the CSS script is in theextra_files/css folder (two_col_style.css).
(If you haven’t got the extra files yet, the download location is here, under the heading Web Design – New Course :(You don’t need the downloads for the old course.)

Web Designing Tutorials(Styling the HTML5 Tags)

The styling for our first HEADER tag is this:
HEADER#Banner {
width: 940px;
height: 100px;
margin: 5px auto;
border: 1px solid #000000;
text-align: center;
background-color: blue;
}
Notice the first line:

Web Designing Tutorials(Styling a one column layout)

Rather than you having to type out all the CSS for this template, have a look in the extra_files/cssfolder that came with this course. (If you haven’t got the extra files yet, the download location is here, under the heading Web Design – New Course :(You don’t need the downloads for the old course.)
Locate the file called one_col_style.css. Copy it to your own CSS folder. Then, in the HEAD section of your HTML, insert the following line:

Web Designing Tutorials(A Simple One Column Layout with HTML5)

The easiest layout to implement with CSS is a one column layout. This is just a series of boxes stacked one on top of the other. We’ll have a Header area, a horizontal navigation menu, an area for the contents of the page, and finally a Footer. The layout we’ll design looks like this:

Read More...

Web Designing Tutorials(The CSS Float Property)

Another way to manipulate the normal, static flow of your web pages is with the float property. You have already used this property in a previous section to wrap text around images. But you can also use the float property to have columns of text side by side. You can even use float to have navigations bars on the left and right of your pages. (We’ll use float in our page layouts, which are coming up soon.)
As an example of column floating, have a look at the image below, taken from a browser:

Web Designing Tutorials(Positioning Elements with CSS)

In HTML, elements like paragraphs, images, etc, are stacked one on top of the other, rather like boxes in a warehouse. The image below is taken from a browser, and shows three paragraphs stacked one on top of the other. (We’ve given each image a border so that you can see them better. Notice that the paragraphs stretch all the way across the page, even though we only have a few words of text in each.)

Read More...

Web Designing Tutorials(Adding Comments to CSS Code)

When you’re experimenting with the CSS, you can use comments instead of replacing or deleting code. Examine the following:
/* background-color: blue; */
background-image: url(../images/gradient_1.jpg);
(adsbygoogle = window.adsbygoogle || []).push({});

The comment symbols are these:
/* */
The new symbols will turn any code into comments, meaning the browser will ignore the line. You can comment out more lines by moving the left or right comment symbols. Like this:

Web Designing Tutorials(Adding Comments to CSS Code)

When you’re experimenting with the CSS, you can use comments instead of replacing or deleting code. Examine the following:
/* background-color: blue; */
background-image: url(../images/gradient_1.jpg);
(adsbygoogle = window.adsbygoogle || []).push({});

The comment symbols are these:
/* */
The new symbols will turn any code into comments, meaning the browser will ignore the line. You can comment out more lines by moving the left or right comment symbols. Like this:

Web Designing Tutorials(CSS Positioning – the box model)

In this section, you’ll learn how to lay out your web pages using CSS positioning. Before doing so, however, it helps to learn about something called the CSS Box Model.

The CSS Box Model

An HTML page is regarded as a series of boxes stacked one on top of the other. These boxes can hold text in paragraphs, images, form objects, etc. Each box is divided up into four areas: a margin, a border, some padding, and finally the content itself:

Web Designing Tutorials(Using HTML Lists to aid Navigation)

You have already seen how to create HTML lists. However, one of the most popular uses of the HTML list is for navigation. You’ll see how this works now. What we’ll do is to create this type of navigation list:
HTML and CSS used to create a navigation area
When the mouse is over one of the above links, you’ll see this:

Web Designing Tutorials(External Stylesheets)

The CSS you have been using so far has been placed in the HEAD section of your HTML code. A better place to put all your CSS, however, is in an external file. (By this, we mean a separate file.)
In a new text file type the following (click File > New in Notepad, if you’re using this):
Read More...

Web Designing Tutorials(CSS and Hyperlinks)

If you’re formatting a hyperlink, you can place all the formatting in a CSS Style. In the style below, we’ve specified an Arial font for all of our links:
CSS used to change the font of a hyperlink
This style will apply to all the hyperlinks on the page. You don’t need to add any CLASS attributes to the A HREF tag because we’re using the HTML selector A.

Web Designing Tutorials(Other Types of Hyperlinks)

Bookmark Hyperlinks

A bookmark link (commonly called an Anchor link) is useful when your web page is rather long, and users have to scroll down to read it all. You can insert Bookmark links to aid navigation. When users click on your links, they will jump to different section of your web pages. You can even use a bookmark link to jump to a different web page, and back to the same spot where they left.
There are two parts to the bookmark: The clickable link itself, and the place where you want to jump to.

Web Designing Tutorials(Linking to other Web Pages)

Linking in HTML code is done with the anchor tag, the tag. The letter “A” in the tag is then followed by an attribute. For a link to another web page, the “A” is followed by “HREF”. To set a bookmark in the same page, the “A” is followed by “NAME”, which you’ll see how to do later.

Take a look at this example, which is a link to the popular search engine Google:

Google Search Engine

Notice where all the angle brackets (< >) are in the link. After the first one, we have the “A” part of the tag. Then we have the HREF part, signifying a link to another web page. After that comes an equals sign (=). After the equals sign comes the address of the web page itself. The address is case sensitive, so if there is a capital letter in the address, make sure to include it. This addresswww.google.com is different from this address www.gOOgle.com.

Read More...

Web Designing Tutorials(HTML Hyperlinks)

Hyperlinks are the backbone of the Web. They provide a means to connect one piece of information (a web page, for example) to another piece of information. If you have designed two web pages, a hyperlink will provide a way to jump from one page to the other. If you have one long web page, a hyperlink can be used as a bookmark to help people jump from one part of the page to another, and back again. This is what a hyperlink looks like (the blue underlined text):

Read More...

Web Designing TutorialsAdding captions to images)

Two new elements are the HTML5 tags FIGURE and FIGCAPTION. The first one, FIGURE, is good for things like images and other graphics, while FIGCAPTION is used to tell people what they are looking at. As an example, take a look at the following code:
<FIGURE>
<IMG SRC=”york_images/york_minster.jpg”>
<FIGCAPTION>A view of York Minster from a side street.</FIGCAPTION>
</FIGURE>

Web Designing Tutorials(Background Images and Background Positions)

You can set your backgrounds to be images, if you prefer. The CSS property to use is background-image. For the value, you specify the location of your image. This goes between round brackets and after the word url. The image name is surrounded with single quote marks:
BODY {
background-image: url(‘my_image.gif’);
}
The same rules on image referencing you learned earlier apply here. The above code, therefore, references an image in the same folder as the current web page. You could place your background images in a folder called backgrounds. The code would then be:

Web Designing Tutorials(CSS Image Borders)

You can have a nice border around your images. There are quite a lot of CSS borders to choose from. But not all are supported in every browser. For example, the border style inset might work OK with a black border in Firefox but not Internet Explorer. (Most border styles should work OK, though.)
The border properties you’ll use the most are these:
border-style
border-width
border-color
The border style values you can use are these (you can also use outset, hidden, and none, but we won’t):

Web Designing Tutorials(Wrap text around an image with CSS)

A few of the IMG Attributes from previous version of HTML have been deprecated in HTML5. One of the most-used was the image alignment attributes. You had quite a few to choose from:
Absbottom
Absmiddle
Bottom
Middle
Left
Right
Texttop
Top
So you could do this:

Web Designing Tutorials(Images and CSS)

Before we start, make sure to copy our smaller images over to your york_images images folder, as explained earlier. There should be 5 of these in the files you downloaded for this course: (If you haven’t got the extra files yet, the download location is here, under the heading Web Design – New Course :(You don’t need the downloads for the old course.)
york_minster.jpg
york_minster_2.gif
york_minster_3.gif
york_minster_4.gif
york_minster_5.gif
The smaller ones are all GIF images.

Web Designing Tutorials(Image Attributes)

When you use IMG you are using a HTML tag. The SRC part is called an attribute. There are lots of other attributes you can add to the IMG tag. Here are the image attributes in HTML 5:
ALT
SRC
HEIGHT
WIDTH
USEMAP
ISMAP
In previous versions of HTML, you also had these:

Web Designing Tutorials(More on Inserting Images)

Navigate to where on your hard drive you saved your HTML pages. For us, this was a folder called HTML. Inside of the HTML folder, create two more. Call one of the folders images and the otherpages. If you’re using a Windows computer, your Explorer window will then look like this (Windows 7):

Read More...

Web Designing Tutorials(Image Types)

You remember at the start of this course we talked about file extensions, and you learnt what the .htmlfile extension was? You’re now going to learn about two new file extensions: JPEG and GIF.
Just like web pages and word process documents have file extensions, so too do images have file extensions. There are a wide range of file extensions used for images. The two most popular file extensions used on web pages are JPEG and GIF. (PNG is another popular image format. It’s similar to GIF, so we won’t discuss it.)

Web Designing Tutorials(Inserting images into a web page)

So you have your image file, either a GIF file or a JPEG. How do you get it into a web page? You do so with the IMG tag in HTML. The basic IMG tag looks like this:
<IMG SRC=”some_image.gif”>
There are no closing tags for the IMG tag. So you don’t do this:
<IMG SRC=”some_image.gif”></IMG>
In between a pair of angle brackets, you type the letters IMG (short for image, of course). After a space, you type SRC. This stands for Source and means the location of your image. After an equals sign, you type the name of your image between a pair of double quotes.
It’s essential that you get the SRC part right, though. To do that, you need to know about Absolute versus Relative file referencing.

Web Designing Tutorials(Font Style, Font Weight, Font Variant)

Font-Style

There are only three font styles to choose from: normal, italic, and oblique. Of course, the default is normal, so you don’t have to use font-style unless you want italic or oblique text. You use them like this:
Example of CSS font-style
There’s not a great deal of difference between italic and oblique, though. If you want to see the difference, use a sans-serif font, with a large font size.

Web Designing Tutorials(Font Size with CSS)

There are plenty of ways to change the font size with CCS.
You can change the size of your page fonts with the font-size property. The values for the property, however, can be a bit tricky. Take a look at these values for font-size:
font-size: 200%;
font-size: 32px;
font-size: 2em;
font-size: xx-large;
They are actually the same size! Try them out in your code. Add the following highlighted CSS Style:

Web Designing Tutorials(Font Colors)

There are quite a lot of other font styles you can use in your CSS. We’ll start with font colours. (Strictly speaking, though, COLOR is not a font style – it can be used just about anywhere to colour lots of different things.):
You can have just about any font colour you want for your text (British English users, note the missing “u” after the second “o”. The American spelling is used in HTML and CSS). To specify a colour, you can use one of three formats:

Web Designing Tutorials(CSS and Fonts)

In HTML versions prior to the new version, which is HTML 5, you could specify a Font with HTML tags. If you wanted Arial, for example, you could do this:
<FONT face=”Arial, Helvetica, san-serif”>Some text here</FONT>
However, In HTML 5 the FONT tag is deprecated. That doesn’t mean you can’t use it anymore, as browsers are backward compatible, meaning that older code will work with all browsers. But if you want to go with the modern way of doing things then fonts, font sizes, and font colours should be done with a Stylesheet.
To change the font on your page, the font-family CSS property is used:

Web Designing Tutorials(Inline and Embedded Styles)

Inline Styles

Open up the HTML template text file you created at the start of the course. Click File > Save As in Notepad. Save the file with the name newpage.html. Don’t forget to change the Save as type box toAll Files before clicking the Save button, if you’re using Windows.
Add some text for the TITLE tag. Add an H1 heading, with some text between the two H1 tags. Now add a paragraph of text below the H1 heading. To create an Inline Style, click after the first H1. Tap the space bar on your keyboard. Type the following:
<H1 style=text-align:center>
Make sure there is no space after the colon and before the word ‘center’.