Web development, so that you have in this area? Website development is the art of creating and developing the World Wide Web. Using tools, graphics and programming on the development of the World Wide Web. This article provides some good resources to help your feet wet in the field of development. First, learn a little about my skills in web development. I am 24 and I started my online business initially at 12 I started hand coding HTML for fun and learned to love the Web pages. I built websites for small businesses to large companies. There are so many resources on the net, so you can participate in Web pages. However, without any knowledge in the field, it can be very confusing. Frequently Asked Questions, which will probably run through my head, what should the development tools “are used, how can I find websites on the Internet” and “How do I create applications. I briefly review these questions and others you will learn with great resources to learn more. Next step in the development process is that you can have a domain name (or website address) – this will be achieved by searching Google for domain names. A domain name would also “yourwebsite. Com. You must also maintain a website to your host file to find. A website host simply stores your website on a computer in a data center that can be accessed from anywhere in the world wide web. Now, let me give you steps to learn how to build a simple website. Firstly, I wish you an understanding of Web development tools to use is the best (in my opinion, of course). When building a website, you can use many different tools. Some use the simplest tools are programs such as FrontPage. However, if you’re interested in a long-term cooperation in this field, I would take a book on Dreamweaver – Dreamweaver, a program that must be purchased. For tutorials on using this program to sites killer. com / Dreamweaver / video tutorials. This program is great) just (given their power and scalability provides amazing. You also need a program called an FTP client. FTP stands for File Transfer Protocol. This program allows you to connect to your site, in conjunction with (your hosting company) and add your Help files. I recommend FileZilla. easywebtutorials Ideal for tutorials Explorer are available. com / html-editing tutorial / teaching /. htmlAnother program can be useful for image design and development, Adobe Photoshop. This allows you to create complex images and quality, and comes with tutorials. Now you must understand the structure of the website, where creation of web pages. HOME PAGE All Files can be found on the Internet that the index files. A site file is the first page everyone sees when they land on your site. Your index file is a page named index. html, perhaps (being an index. php or some other) – The most common is the index. html. The locations of the target page always has an index file. For example, if you Google. com Google – you are really accessible. com / index. html. You can use all the other pages you want the name, but you always have an index file in the root directory of your site. Once you have a main index page, you additional pages that you create together, eventually through from your homepage. Good examples would contactus. html. html, joking. html, etc. You can create new pages in your website to create editor (Dreamweaver) and then you can go to the index. HTML file, then create a shortcut to the new pages that you create using the icon link. It was a brief overview of the process of web development. To the great resources available on the Internet Google “web development tutorials, Dreamweaver tutorials, web design tutorials, and so on. If you are interested in a website programmer, learning languages such as PHP, ASP, JavaScript, and so on. I suggest you check the categories in your local community college or Google search guide for beginners to programming. “recap briefly – web development, operation of this process. You’ll create your site in Dreamweaver and save the page to create an index. html – then create sub-pages as contactus. html aboutus. html, services. html, and then link to them from the homepage. Then you go to the index download. HTML and other files with FileZilla to your home directory root account. This directory is often called http, httpdocs, www, home. I hope that helped!
Archive for March 14th, 2010
Site development, web so you want to enter this field?
Author: adminMar 14
Create your own website is easy – A tutorial (Part 2)
Author: adminMar 14
Now, continue with Part 2 We discuss here the following: Creation of tables and boxes using CSS as the layout of home.
Here’s how:
Creating Tables
The tables are very useful in data presentation. The following HTML tags will be used to create a simple table:
Single column table:
Â? Table width = “400″ border = “1″ cellspacing = “2″ cellpadding = “4″>
Â? Tra? Â? Tda? Line 1 data? / ADD? Â? / Tra?
Â? Tra? Â? Tda? Line 2 data? / ADD? Â? / Tra?
Â? / TableA?
Enter the mywebpage top of your file. HTML tags in the body, store and update your browser. This is the table on the net. From the HTML code above, which refers to the width of the entire table (you can even pixels, as “800″), telephone line or boundary is the schema of the table space is cellspacing between cells are the cells of the zone in which these data are cellpadding is the space between frames and cells. You can use the values of this array of attributes or properties as desired or required.
Although the table above HTML codes are still active, http://W3C. org, the table properties or attributes in CSS or should be defined. With CSS, the above characteristics of the table can be represented as follows:
In a style tag in the head
. Type1 (
width: 400px;
padding: 4px;
margin: 2px;
)
. Limit (
border: 1px solid # 000;
)
Then in the body tags:
Â? Table class = “border type1″ â?
Â? Tra? Â? Tda? Line 1 data? / ADD? Â? / Tra?
Â? Tra? Â? Tda? Line 2 data? / ADD? Â? / Tra?
Â? / TableA?
(Looking at the codes “Type 1″ by the previous paragraph.) Either he is a class selector. For the next type of table properties or attributes, you can label type2, type3, and so on, or with other names that you prefer. “Limit” is also a class selector and “border: 1px solid # 000″ is the thickness (1px) border-type (solid) and color (# 00f) of the border. There are discussions about CSS in “boxes CSS Design and Layout Web” and “Use CSS to design your web pages”
When you receive the above, then enter the code in the style and body tags to try, as mentioned, save and refresh your browser. It must be the same as the first.
Now we want a 2-column or multi-column table:
Â? Table width = “400″ border = “1″ cellspacing = “2″ cellpadding = “4″ â?
Â? Tra? Â? Tda? Line 1 Data 1Â? / ADD?
Â? Tda? Line 1 Data 2A? / ADD? Â? / Tra?
Â? Tra? Â? Tda? Line 2 data 1Â? / ADD?
Â? Tda? Line 2 data 2a? / ADD? Â? / Tra?
Â? / TableA?
Enter the mywebpage top of your file. HTML tags in the body, store and update your browser. This is the 2-column table on the net. In a column, you would add? Add TDA? Â? / ADD? after? / ADD?. 1 Â? Tda? Â? / ADD? is a column, 1 A? tra? Â? / Tra? is a line and 1 A? table? Â? / TableA? is a table.
Now, can create a table with 1 main and 3 sub-components:
Â? Table width = “400″ border = “1″ cellspacing = “2″ cellpadding = “4″ â?
Â? Tra? Â? Td colspan = “3″ â? Main heading? / ADD? Â? / Tra?
Â? Tra? Â? Tda? Category 1a? / ADD?
Â? Tda? Section 2A? / ADD?
Â? Tda? Section 3a? / ADD? Â? / Tra?
Â? Tra? Â? Tda? Line 1 Data 1Â? / ADD?
Â? Tda? Line 1 Data 2A? / ADD?
Â? Tda? Line 1 Data 3A? / ADD? Â? / Tra?
Â? Tra? Â? Tda? Line 2 data 1Â? / ADD?
Â? Tda? Line 2 data 2a? / ADD?
Â? Tda? Line 2 data 3A? / ADD? Â? / Tra?
Â? / TableA?
Enter the mywebpage top of your file. HTML tags in the body, store and update your browser. You see? Yes, you can use colspan to merge columns. To use 2 columns colspan = “2 Merge” and 3 columns, use the colspan = “3″ and so on.
When you merge rows, rowspan colspan used instead. Consider this example:
Â? Table width = “400″ border = “1″ cellspacing = “2″ cellpadding = “4″ â?
Â? Tra? Â? Td rowspan = “2″ â? Merge data line? / ADD?
Â? Tda? Line 1 Data 2A? / ADD? Â? / Tra?
Â? Tra? Â? Tda? Line 2 data 2a? / ADD? Â? / Tra?
Â? / TableA?
Enter now at the top of your mywebpage. HTML tags in the body, store and update your browser. Now you see that 2 lines were merged in the first column.
Tip: Create your own table with different values to become familiar with the handling of tables.
Creating CSS-top boxes for Web layouts
Before tables by submitting a Web page is to be used. Thus, the top right-hand bars, bars on the left, main content areas and footer in a table. This slows the page load, as the browser, first, the picture is complete before displaying the content. Your visitors may have left before your page appears. If you want to use the table as a layout, you should avoid, with large tables. They make better use of small tables, so the browser displays your site gradually, but faster.
Although the table may still be used, requires W3C CSS boxes instead of tables for layout, are used on the issue of accessibility. Boxes CSS loads faster than tables. These could be controlled in the style sheets that could be in the head tags or in a separate CSS file. The most important part of boxing is in CSS positioning. Then I’ll tell you, the positioning properties of these boxes on my experience:
position: absolute – you must set the x-axis and Y axis reference point of the angle of the box. x axis is left or right and Y axis is either up or down. They also set the width or the left edge and right spacing of the box. The box is not affected by the preceding or following fields. Similarly, the fields before or after the boxes are identified as being absolutely positioned, are not affected.
float: left or right – you have the correct width. You must also choose whether the left or right. The box will sit on the side selected. It is based on the ground before him, if there is enough room for them. It is influenced by other areas with the exception of absolutely positioned boxes.
No position or function: static or fixed equal – this flow of normal. This is also supported by the other fields are affected with the exception of absolute position. You must set the width or the left and right margins.
Now you see the figure below, the 5 cases, namely: headerbox, leftbox, centerbox provide maximum investment rating and footerbox. These are boxes of liquid, which are automatically in width if the display is changed window size of the computer:
Â? Style type = “text / css” â?
body (
text-align: center;
margin: 1px;
)
# Headerbox (
width: 100%;
Height: 15%;
background-color: # 9cf;
border: 1px solid # 00f;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
)
RIGHTBOX # (
float: right;
width: 20%;
margin-top: 5px;
text-align: center;
background-color: # CFF;
border: 1px solid # 00f;
height: 100%;
)
# Leftbox (
float: left;
margin-top: 5px;
width: 20%;
text-align: center;
background-color: # CFF;
border: 1px solid # 00f;
height: 100%;
)
# Centerbox (
width: 99%;
margin-top: 5px;
text-align: center;
background-color: # CFF;
border: 1px solid # 00f;
height: 100%;
)
# Footerbox (
width: 100%;
text-align: center;
Height: 15%;
vertical-align: middle;
margin-top: 5px;
background-color: # 9cf;
border: 1px solid # 00f;
)
Â? / STYLE?
Â? / Head?
Â? Bodia?
Â? Div id = “headerbox” Â? HEADERBOX Content Area? / Diva?
Â? Div id = “leftbox” Â? LEFTBOX Content Area? / Diva?
Â? Div id = “least corrupt” â? RIGHTBOX Content Area? / Diva?
Â? Div id = “centerbox” Â? CENTERBOX Content Area? / Diva?
Â? Div id = “footerbox” Â? FOOTERBOX Content Area? / Diva?
Â? / Bodia?
First you give the HTML code above you mywebpage. html in the head, style and body tags, as in the foregoing. Then, save and refresh your browser or open the file with your browser. Do you see headerbox on top, leftbox, centerbox and least corrupt country in the middle and footerbox at the end? Try changing the width of the browser window. You see? The width of the field are also fit and if your site will be automatically assigned based on the parameters of the size of your browser window participants! Because I% s is used to determine the width of the boxes.
Well, let me explain the code above for the manufacture of boxes as your layout.
headerbox – preceded by #, ie there is an identity selector, and could be used once per page; float: left, field is on the left side when right; width: 100% means that the field is 100% of the browser window and therefore it is liquid, height: 15% means that the field is 15% of the browser window; text-align: center is the orientation of objects or characters in a box, and there is background-color: # 9cf color space inside the box; border: 1px solid # 00f is also in the creation of equality.
The least corrupt country – the same statements as above, except for the float: right, which is the right box and margin-top: 5px, the distance between the bottom row of the box above (headerbox) thin.
leftbox – even in the above statements.
centerbox – even in the statements above, except that it is not defined position, ie it will follow normal. It can be installed on the space available. This corresponds to 100% or actual size. Over this limit to distort the field orientation.
footerbox – align themselves in the previous statements, except vertical: in the center, which means that objects or characters in the box aligned vertically in the middle.
Try to get the values from the values of CSS boxes in front, then click Save. Upgrade your browser and familiarize yourself with the effect of any change. Please note, however, there May be slight differences, if the above boxes are displayed with CSS browsers other than Internet Explorer, Firefox and Opera.
Take part 3
Website design with Adobe Dreamweaver
Author: adminMar 14
So you’ve bought or acquired a copy of Macromedia Dreamweaver or Adobe Dreamweaver, what you have always desired to call. Now you want to create great web design with your newly installed program. This Dreamweaver tutorial comes into play, and I’d like you to Dreamweaver, step by step and create your first page. 1. Here, you can run Adobe Dreamweaver and a new Web page. It will open three columns (Name, Create, Creating test) in the “new” column, we’ll choose HTML. Dreamweaver, then bring to a new blank page, which is in Design. Dreamweaver has three different views, Code view, and Split view mode. See code displays the HTML, or you have created or created using HTML, Dreamweaver. View Split is just half of the sight screen code and the other is the view of design. The split screen allows you to things in the design mode, and impact on the code at the same time to see. Dreamweaver design view is probably my favorite of all because it is so easy to use as a word processor. Can not leave for Dreamweaver Design View. 2. You can add a title and background color on our side. On the right side of the Design tab, you see the word “right” with a text box on the right side. Here we will create the title of our website, you can write something, we want you here. Now we’ve added a title to our site, Dreamweaver can change the background color. Simply right click anywhere on the page and click on “Page Properties” and it opens a window to a variety of options, it has to adapt to your page. I’m going and my background color in my color black and white text. I leave everything to its default settings, but you can see that Dreamweaver gives us many options on our custom website. 3. Adding text on the site. On the lower part of Dreamweaver, you will see three buttons that look like buttons to the direction of your program favorite word processor. Lets go ahead and select the middle button, and I mean go to the menu on the left side of this size “and change that would be 36, so I have large text. Now you can practically whatever you want, and will be centered at the top of the page size of 36. 4. Creating links. Adobe Dreamweaver creates links is very simple. To be a link, highlight the desired text, then add the address of a Web page in the text box to create the right to work “link” to. I’m going to my great text and number 36 in the text box I am typing “brand http:/ / www. Mikenetpc. Com “and then press Enter. You will notice that the text has turned blue, which is the default color of a link on a webpage. 5. Adding images. Well, the only thing we have to do left is a picture on our website and Dreamweaver makes it easy. Suppose that you are using CS3, there are several tabs at the top of the screen (common layout, forms, dates, etc. ..) and click small picture of a tree, the image button. This menu is selected and you get the picture. Now, you get a box open windows that allow you to select the desired image and insert it. To select an image and click OK in the next window asks you to retrieve the replacement text and long description. The alternate text is displayed when the image is not loaded or when the user moves the mouse on the image above. To give a little description of the image. Then click OK and the image has been inserted.
For some other articles and video lessons on Dreamweaver check out my site. http://www. mikenetpc. com
