# Web Authoring

![background2846221_1920.jpg](https://files.steempeak.com/file/steempeak/geshasproject/W7qILyDa-background-2846221_1920.jpg)
[Credit](https://pixabay.com/en/users/kulinetto-6689062/)

Web authoring is a practice to create web documents using web authoring software and tools. Web application software is a type of desktop or web-based publishing tool that enables users to build websites without using HTML (HTML is the abbreviation for Hypertext Markup Language; it is for creating the structure of web pages.) and other codes by offering a different kind of graphical user interface. The software generates the required codes for the layout of the web page based on what the user designs. The designer, the developer, can see a visible result of the final project after it built.

Web authoring tools are like HTML editors. However, they typically let swapping between an HTML code view and visual design. These types of devices also described as WYSIWYG (What You See Is What You Get). It alternative is to hand code development for less experienced designers in coding.

There are many different web authoring tools available for those who are less skilled with web code syntax. Though most of these applications are entirely suitable for hand coding, too, you do not need these applications for creating web pages; You can use any text editor, even windows notepad to code websites if you are versed in coding.

## Popular Web Authoring Applications

###     Desktop Publishing:
- [Adobe Dreamweaver CC](http://www.adobe.com/ie/products/dreamweaver.html)
- [Web Easy Professional](http://www.avanquest.com/USA/software/webeasy-professional-10-500665)
- [Xara Webdesigner](http://www.xara.com/eu/web-designer/)
- [Coffeecup Visual Site Designer](https://www.coffeecup.com/html-editor/)

### Web-Based Software
- [Squarespace](https://www.squarespace.com/)
- [Weebly](https://www.weebly.com/ie)
- [Wix](https://www.wix.com/)
- [WordPress](https://wordpress.com/)

### Text Editors
- [Notepad++](https://notepad-plus-plus.org/)
- [Sublime Text](https://www.sublimetext.com/)
- [Atom](https://atom.io/)
- [Brackets](http://brackets.io/)

## How to create a website?

I guide you in a brief how works this the creation of a website from planning to publishing.

 ### Planning

Every site, small or big, needs some preparation.

![concept29596061920.png](https://files.steempeak.com/file/steempeak/geshasproject/8F2I550y-concept-2959606-1920.png)
[Credit](https://pixabay.com/en/users/geralt-9301/)

1. Brainstorming, gathering information, ideas, research on the chosen topic.
2. Purpose of the site. Define why you want to make the site.
3. Goals. What would you like, or your client to achieve your site?
4. Audience. You must define your target audience and identify the audience needs.
5. Figure out a couple of primary and subtopics for your site. Each topic will represent one page of your website. Name each of your pages, for instance, index.html, about.html and so on.
6. Create the content of your every page, depending on the topics and ensure the content is appropriate for the target audience. The content should include text, the main images (graphics, photos, illustrations) and Multimedia.

### Design

![web1668928_1920.png](https://files.steempeak.com/file/steempeak/geshasproject/98e7jtkx-web-1668928_1920.png)
[Credit](https://pixabay.com/en/users/geralt-9301/)

1. Create a Sitemap. It is a graphical representation of the website structure, including the navigation form and identifies the relationship and hierarchy between the pages.
2. Create Wireframes. These are schematic, pencil drawing or digital sketch versions of the pages of a website and should be created both, first for mobile after desktop and show the key content as well as the required functions. Wireframes have no colour, no font, no graphics.
3. Design comps. Choose the colour, images and text fonts for your site, including beautiful photos, icons, favicon.

### Technical Requirements

Identify the vital technical details for implementing your site, like JavaScript, whether there will be a server-side language, like PHP use or shopping cart and so on.

### Building

![web1935737_1920.png](https://files.steempeak.com/file/steempeak/geshasproject/zDI2a6EB-web-1935737_1920.png)
[Credit](https://pixabay.com/en/users/lakexyde-2489063/)

- Structure the pages with HTML 5 (This is the latest version of HTML). Browsers do not display HTML tags but using them to render the content of the page.
- Apply CSS. CSS stands for Cascading Style Sheets and describing the style of an HTML document, how HTML elements should display.
- Apply JavaScript. JavaScript programming language can provide dynamic interactivity on web pages. Together with HTML and CSS, it is one of the three leading technologies of the World Wide Web creations.
- Build the necessary other applications, plugins.

### Testing

![check3183215_1920.jpg](https://files.steempeak.com/file/steempeak/geshasproject/Pd1bYn6e-check-3183215_1920.jpg)
[Credit](https://pixabay.com/en/users/geralt-9301/)

Under the testing process make sure your HTML and CSS, scripts and other technical features working correctly. Fix any glitches efficiently. The design works all significant browsers appropriately
.
1. Periodically preview your pages both on the desktop and mobile browsers at the under-construction phase.
2. If it is possible, you can set up a local host on your computer.
3. You also can use GitHub testing your site.
4. Validate your site.


### Publishing

If you want to publish your site, you need to upload your files to a hosting provider’s server, but also you can use GitHub to bring your website to the public.


  


***


#### References
- [Web authoring, HTML tools](http://websitetips.com/html/tools/)
- [Web design project](https://designmodo.com/web-design-project/)

#### Learning Resources
- ##### Web Design Tutorials
    - [Envato Tuts+](https://webdesign.tutsplus.com/)
    - [Killer Sites](https://www.killersites.com/)
    - [1st Web Designer](https://1stwebdesigner.com/web-design-tutorials/)
    - [Adobe Tutorials](https://www.bringyourownlaptop.com/)

- ##### Web Development
    - [Free Code Camp](https://www.freecodecamp.org/)
    - [Codecademy](https://www.codecademy.com/)
    - [W3Schools](https://www.w3schools.com/)
    - [Anybody can learn code](https://code.org/)

#### Useful links
- [The Internet Society](https://www.internetsociety.org/)
- [Microsoft Academic](https://academic.microsoft.com/)
- [UCR Library](https://library.ucr.edu/)


***


Thank You for reading,
Gesha 

*** 


###### ©2019 Gesha Geza Vrabel @geshasproject