ASSIGNMENT - WEBSITE

1) Insert a table
To quickly insert a basic table, click Insert > Table and move the cursor over the grid
until you highlight the number of columns and rows you want.

Click and the table appears in the document. If you need to make adjustments, you can
add table rows and columns, delete table rows and columns, or merge table cells into
one cell.
When you click in the table, the Table Tools appear.

Use Table Tools to choose different colors, table styles, add a border to a table or
remove borders from a table. You can even insert a formula to provide the sum for a
column or row of numbers in a table.
If you already have text in your document that would look better as a table, Word can
convert the text to a table.
Insert larger tables or tables with custom width behaviors
For larger tables and for more control over the columns, use the Insert Table command.
This way you can create a table with more than ten columns and eight rows, as well as
set the column width behavior.

1.Click Insert > Table > Insert Table.

2.Set the number of columns and rows

1. In the AutoFit behavior section you have three options for setting how wide your
columns are:
o

Fixed column width: You can let Word automatically set the column width
with Auto, or you can set a specific width for all of your columns.

AutoFit to contents: This will create very narrow columns that will expand
as you add content.

AutoFit to window: This automatically changes the width of the entire

table to fit the size of your document.

2. If you want each table you create to look like the table youre creating, check
Remember dimensions for new tables.
Design your own table
If you want more control over the shape of your tables columns and rows or something
other than a basic grid, the Draw Table tool helps you draw exactly what you want.

You can even draw diagonal lines and cells within cells.
1. Click Insert > Table > Draw Table. The pointer changes to a pencil.
2. Draw a rectangle to make the tables borders. Then draw lines for columns and
rows inside the rectangle.

3.

To erase a line, click the Table Tools Layout tab, click Eraser, and then click the
line that you want to erase.

2.Text Colour
One of the things you may want to do as you develop your website is to modify the
appearance of the text on your web pages. For example, you may want to use a different font
for the words, or you may want to put some text in bold or italics. Or perhaps you may even
want to change their colour ("color" if you use US English). This chapter shows you how you
can do these things using the web editor.By the end of this chapter, you will be able to
change the appearance of the text on your web page. This includes changing fonts, using
bold or italics, and modifying the colour of the text.
3.What is a Declaration and give example
A document type declaration, or DOCTYPE, is an instruction that associates a particular SGML
or XML document (for example, a webpage) with a document type definition (DTD) (for
example, the formal definition of a particular version of HTML).[1] In the serialized form of the
document, it manifests as a short string of markup that conforms to a particular syntax.
The HTML layout engines in modern web browsers perform DOCTYPE "sniffing" or "switching",
wherein the DOCTYPE in a document served as text/html determines a layout mode, such as
"quirks mode" or "standards mode". The text/html serialization of HTML5, which is not SGMLbased, uses the DOCTYPE only for mode selection. Since web browsers are implemented with
special-purpose HTML parsers, rather than general-purpose DTD-based parsers, they don't
use DTDs and will never access them even if a URL is provided. The DOCTYPE is retained in
HTML5 as a "mostly useless, but required" header only to trigger "standards mode" in
common browsers.
4.What is Navigation and give example

We present a website collection that make use of icons in their navigation menus and that we
hope can serve you of example and inspiration. Navigation menus are important to help the user find the
information that he or she seeks. Use of colors, highlights and mouse-over effects will facilitate
detection of the items that

5.Insert Background
Adding a plain background
All you need to do is add a
tag:

are being searched.

Bla bla bla bla

bla bla bla bla bla
bla bla bla bla bla
bla bla bla bla bla
bla bla bla bla bla
bla bla bla bla bla
bla bla bla bla bla
bla bla bla bla bla
bla bla bla bla bla
bla bla bla

Bla bla bla bla

bla bla bla bla bla
bla bla bla bla bla
bla bla bla bla bla
bla bla bla bla bla
bla bla bla bla bla
bla bla bla bla bla
bla bla bla bla bla
bla bla bla bla bla
bla bla bla

Colour
color to your page is easy.
bgcolor property to the body

<body bgcolor="#FF0000">
As you see, the background color (#FF0000) is entered as a hexadecimal value. You can
click here to learn about the hexadecimal system used on HTML pages.

While plain white and plain black are the most widely used colors on the net, there seems to be a
trend moving towards slight variations of these.
The reason is that the sharp contrast between pure white or black and the text color might be less
readable than a slightly faded white/black.
Look at these examples and choose for yourself which is most readable. To the left are plain
white/black and to the right are slight variations.

6.Set Page to Center

I need is to show the content of a web page in the center of the browser, no matter what screen size it is, big or
small, resolution high or low, it always gets automatically adjusted to the center of the browser. Thanks in advance
My Html and css code is below
HTML code

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="basic1.css"/>
</head>
<body>
<div id="menu">
<a href = "#"><img class="imgc" src="img.png" alt="icon"/></a>
<a href = "#"><img class="imgd" src="do.png" alt="do"/></a>
</div>
<div id="smenu"></div>
<div id="mainbox">
<div class="ibox"></div>
</div>
<div id="menutext">
<ul>
<li><a href="#"><b>???????</b></a></li>
<li><a href="#"><b>?????</b></a></li>
<li><a href="#"><b>?????</b></a></li>
</ul>
</div>
<div id="py">
<pre class="p">??<span style="color:black;font-size:25px">??????</span></pre>
<pre class="s">?? ???? ??? ??? <span style="color:#980000;
letter-spacing :+1mm"><b>:3</b></span></pre>
</div>
</body>
</html>
7. Insert Last Update.
'!last_updated' => $last_updated;
);
This snippet allows you to use custom tokens in your footer message to display, for example, a
dynamic "last updated" date.
Step 1 of 2
In your template.php create the function mytheme_preprocess_page, where mytheme is the name
of your theme.
<?php
function mytheme_preprocess_page(&$vars, $hook) {
// get date of most most recent change to a node
$last_updated = db_result(db_query('SELECT FROM_UNIXTIME(MAX(changed)) FROM {node}'));
// define replacement tokens for our footer message
$tokens = array(
// replace tokens in footer_message
$vars['footer_message'] = strtr($vars['footer_message'], $tokens);
}
?>

Step 2 of 2
Then, in admin >> Site information, you can put something like "Last updated: !last_updated" in
the footer field, and voila! Now your pages will have a dynamic footer showing the last update to
your site.

The next step

If you want to go a bit further, you can define new tokens - of pull in tokens from the
token module.If you want to be able to embed PHP in your footer, then simply put the
following code in your mytheme_preprocess_page function. Use with caution though...
<?php
$var['footer_message'] = drupal_eval(variable_get(variable_get('site_footer', FALSE)));
?>

Inserting "last updated" time using Views

You can also achieve this same functionality by simply using a view.
Here are the steps to create the view:
1. Check the box to provide a block (when creating the view). You should also set to show 1 Node
per block. Set the view type to list.
2. In the Fields section, add the field Node: Updated Time. You can set the Handler to anything you
want.
3. In the Filters section, select Node Type and then highlight what node types you want to check
updates for. (It's also a good idea to check that the node is published as well).
4. In the Sort Criteria, add the field: Node: Updated Time and order by Descending.
Then you can insert this block view you just created in any region in your theme.
8.Page Brake
Almost all printable document types can handle author specified page breaks. Wondering how to
add page breaks to your web pages?

Starting with the release of Cascading Style Sheets 2 specification, you can finally suggest to
browsers when to break pages when printing your web pages. The bad news is that only Explorer
4.x support this feature at this time. On the other hand, adding page break tags to web pages will
not cause any ill effects on other browsers.
To suggest a page break, add <P style="page-break-before: always"> before the beginning of
a new printed page. For example, if you place the following tags on a HTML page and print it using
a compatible browser, you will end-up with three pages with the sample text.
9.Create
Marquee
Text
Following is the list of important attributes which can be used with <marquee> tag.
1. Open your HTML document, if you haven't already
2.Place this code where you'd like your marquee to be:
3.Set a background color. You can change the background of your marquee by specifying a
hexadecimal (hex) value, or a RGB (Red Green Blue) value after the "background-color:" part of the
code above. The default value listed above, #000080, isnavy blue. A full list of colors and their
values can be found here.
4. Set a scrolling direction. Change the direction attribute in the code to any of the following: right,
left, up or down.
5. Specify the number of loops for your marquee. The loop attribute can be changed to suit your
needs - it controls how many times the marquee should loop. If you want it to run continuously,
leave out this attribute.
6. Specify the marquee text. The text inside the <marquee> tag and the</marquee> tag will be

the scrolling text of your marquee. Write whatever you want your marquee to say here.
7.Set a text color. Adding a style attribute inside a set of <div> tags surrounding your text can
allow you to control the color of the text in the marquee. You will want this color to be different
from your background color so that the text can be visible.
Attribute

Description

width

This specifies the width of the

marquee. This can be a value like 10
or 20% etc.

height

This specifies the height of the

marquee. This can be a value like 10
or 20% etc.

direction

This specifies the direction in which

marquee should scroll. This can be a
value like up, down, left or right.

behavior

This specifies the type of scrolling of

the marquee. This can have a value
likescroll, slide and alternate.

scrolldela
y

This specifies how long to delay

between each jump. This will have a
value like 10 etc.

scrollamo
unt

This specifies the speed of marquee

text. This can have a value like 10
etc.

loop

This specifies how many times to

loop. The default value is INFINITE,
which means that the marquee loops
endlessly.

bgcolor

This specifies background color in

terms of color name or color hex
value.

hspace

This specifies horizontal space

around the marquee. This can be a
value like 10 or 20% etc.

vspace

This specifies vertical space around

the marquee. This can be a value

like 10 or 20% etc.

Below are few examples to demonstrate the usage of marquee tag.

10.How to Save and Run Web
To create and run your first web project
1.Create a project. For that, choose File | Create New Project on the main menu.
2.In the Create New Project dialog box that opens specify the name of the project in the Name text
box, for example, type MyFirstWebProject.
3.In the Location text box, specify the folder to create the new project folder in. Type the path
manually or click the Browse button browseButton.png next to the text box. Then select the desired
folder in the dialog that opens. PhpStorm composes the path to the project folder as follows:
webstdcreateNewProject.png
4.Create an HTML file. To do that, right-click the project directory in the Project tool window, point
to New on the context menu, and choose HTML File

5. In the New HTML dialog box that opens type MyFile and click OK. PhpStorm will create the stub
file for you and open it in the dedicated editor tab.
Type this sample code inside the <html /> tag:
<html> <head>
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"></script>
<title>Your first Web project</title>
</head>
<body>
<div id="map" style="width: 400px; height: 300px"></div>
<label for="latitude">Latitude:</label>
<input type="text" id="latitude" value="59.942402"/><br/>
<label for="longitude">Longitude:</label>
<input type="text" id="longitude" value="30.293661"/><br/>
<input type="submit" value="Show map" onclick="
showMap(document.getElementById('latitude').value,document.getElementById('longitude').value);
"/>
<script type="text/javascript">
function showMap (latitude, longitude) {
var myMap = new ymaps.Map('map',{
center:[latitude, longitude],

zoom:16
});
}
</script>
</body>
</html>
7. Save the file by choosing File | Save All or pressing Ctrl+S .
8.Run your application. Do one of the following:
o

Choose View | Open in Browser , then select the desired browser from the list.

Click the desired browser on the browser toolbar:

9.In the page that opens in the browser, click the Show Map button. The Yandex map, that is
displayed, shows the location of the IntelliJLabs office in Saint-Petersburg.