WEB
DESIGN
ELEC 113
TOOLS
CONTENT
• Markup Languages
• Cascading Style Sheets
• Scripting Languages
• Text and HTML Editors
• Web Development Tools
• Web Templates and Content
Management Systems
MARKUP
LANGAUGE
MARKUP LANGAUGE
A markup language is a coding system that uses tags to provide
instructions about the appearance, structure, and formatting of a
document. The markup languages used to create webpages are
HTML, XML, and XHTML.
HTML - HYPERTEXT MARKUP LANGUAGE
HTML - the Hypertext Markup Language (HTML) is a markup language used to create
webpages. HTML uses predefined codes called HTML tags to define the format and
organization of webpage elements.
HTML tags must be in lowercase, surrounded by brackets, and inserted in pairs to define
the beginning and the end of the target of the tag.
For example:
<form> ...... </form>
HTML tag pair indicates the beginning and the end of a webpage form, respectively. The
most current HTML standard is HTML5, which includes tags for creating webpage
sections and easily adding video and audio. HTML5 also incorporates standards and
protocols that enable RWD and other adaptive features that incorporate adjustments for
mobile browsers.
XML - EXTENSIBLE MARKUP LANGUAGE
Extensible Markup Language (XML) is a markup language that uses both
predefined and customized tags to facilitate the consistent sharing of information,
especially within large groups. Whereas HTML defines the appearance and
organization of webpage content, XML defines the content itself.
CASCADING STYLE SHEETS
A Cascading Style Sheet (CSS) is a document that uses rules to standardize the
appearance of webpage content by defining styles for elements such as font,
margins, positioning, background colors, and more.
Web designers store CSS specifications for a website in a separate document,
called a style sheet. A web designer can attach the style sheet to multiple website
pages; any changes made to the style sheet automatically apply to the associated
webpages.
Cascading refers to the order in which the different styles are applied.
SCRIPTING LANGUAGES
Scripting language are programming languages used to write short programs,
called scripts, that execute in real time at the server or in the web browser when a
webpage downloads.
Scripts make webpages dynamic and interactive by adding features such as
multimedia, animation, and forms or by connecting webpages to underlying
databases. JavaScript, PHP: Hypertext Prepocessor (PHP), and CoffeeScript are
examples of scripting language.
Active content is webpage content created using a scripting language such as
JavaScript and PHP.
Example: Streaming Video, maps embedded objects, animated images.
TEXT AND HTML EDITORS
• Notepad
• Notepad ++
• Sublime
• Adobe Dreamweaver
• Visual Code Studio
WEB DEVELOPMENT TOOLS
• Adobe Dreamweaver
• Innova Studio
• GitHub
Another term for web development tools is WYSIWYG editor or "What you see is
what you get"
Inserting and formatting text and inserting images or links in a webpage using a
web development tool are similar to creating a document in word processor, such
as Microsoft Office.
Additionally, using a web development tool to create webpage eliminates the need
to learn a markup language, which can involve complex coding procedures,
because the web development tool automatically generates the underlying
markup language tags as you insert and format text, images, and links.
WEB TEMPLATES AND CONTENT
MANAGEMENT SYSTEM
A web template or theme is a predesigned model webpage that you can customize for
fast website or webpage creation and updating.
Many web development tolls also provide web templates for fast website and webpage
creation.
A content management system (CMS) is software that provides website creation and
administrative tools that enable the management of web content development,
including authoring, reviewing, editing, and publishing.
Content repository - is the database where all the templates, style sheets, and other
frequently used content elements, such as a logo graphic, are stored.
Drupal, WordPress and Joomla are examples of robust CMS software applications.
Intranet - an intranet is a private network within a large organization or commercial
entity that uses Internet and web technologies to share information among its
members, employees, or business partners. Employees who have no web design
experience or programming expertise can add webpages or update content on existing
webpages on the intranet.
DESIGN
TIP!
Make sure to integrate any new
technologies with the design,
features, and content of your
website. Only add the new
technology if it will enhance the
experience for website visitors.
QUESTIONS?
THANK YOU!