background preloader

A Practical Guide to HTML & CSS - Learn How to Build Websites

A Practical Guide to HTML & CSS - Learn How to Build Websites
Before beginning our journey to learn HTML and CSS it is important to understand the differences between the two languages, their syntax, and some common terminology. As an overview, HTML is a hyper text markup language created to give content structure and meaning. CSS, also known as cascading style sheets, is a presentation language created to give content style and appearance. To put this into laymen terms, HTML determines the structure and meaning of content on a web page while CSS determines the style and appearance of this content. Taking this concept a bit further, the HTML p element is used to display a paragraph of text on a web page. Common HTML Terms When getting started with HTML you are likely to hear new, and often strange, terms. Elements Elements are designators that define objects within a page, including structure and content. Tags Elements are often made of multiple sets of tags, identified as opening and closing tags. <a>... Attributes HTML Document Structure & Syntax <!

Padrino and Sinatra: Light weight web framework | SimpleTechBlog The open source community is on a tremendous pace to introduce and develop new technologies to make the web development easier. Frameworks like Rails have changed the development methodology for an web applications. Simple concepts like Agile and CoC (Convention over Configuration) has proved the benefits in the long run. But who says you have to live with that. 1. Web based framework which gives you lot of flexibility and is minimal in nature. require 'sinatra' get '/hi' do "Hello World!" And then $ gem install sinatra $ ruby hi.rb == Sinatra has taken the stage ... >> Listening on 0.0.0.0:4567 You are done. 2. This is another framework which is said to be built over Sinatra (again a gem), and provides certain functionality of scaffolding, admin panel, authentication and authorization, etc out of the box. gem install padrino padrino g project myapp -d datamapper -b cd myapp padrino g admin padrino rake dm:migrate seed padrino start More Posts Related Articles

The Datomic Information Model Datomic is a new database designed as a composition of simple services. It strives to strike a balance between the capabilities of the traditional RDBMS and the elastic scalability of the new generation of redundant distributed storage systems. Motivations Datomic seeks to accomplish the following goals: Provide for a sound information model, eschewing update-in-place Leverage redundant, scalable storage systems Provide ACID transactions and consistency Enable declarative data programming in applications Datomic considers a database to be an information system, where information is a set of facts, and facts are things that have happened. Traditional databases (and many new ones!) It's interesting to consider why keeping active history is even in question. A database is a database in large part due to the leverage it provides over the data. Structure and Representation Every database has a fundamental unit at the bottom of its model, e.g. a relation, row or document. Schemas :person/name Query

Best .htaccess practices with sample code for any website | SimpleTechBlog The file .htaccess controls the Apache webserver, is very useful and allows you to do a lot of things. Recently for one project, I had to do certain optimizations for getting good pagespeed rank. In general, all what I have learnt is being shared here not in any order. General and Recommended 1. This is the fastest rewrite engine for apache server and works really well. 2. Files which won’t change frequently should be cached to improve speed of the website 3. Files which change frequently or can change should not be cached. 4. This will help to serve your webpages faster and thus load your website quicker. 5. Google Pagespeed recommends removing all ETags from file headers. 6. Optional (if required by your website) 7. 8. 9. 10. Some crawlers will unnecessary consume your website’s bandwidth. There are lot of keywords and tags which .htaccess file uses and Apache server understands. Arijit DeHi I am Arijit De and I own and manage the SimpleTechBlog. More Posts Related Articles

svgweb - Scalable Vector Graphics for Web Browsers using Flash Overview SVG Web is a JavaScript library which provides SVG support on many browsers, including Internet Explorer, Firefox, and Safari. Using the library plus native SVG support you can instantly target ~95% of the existing installed web base. Once dropped in you get partial support for SVG 1.1, SVG Animation (SMIL), Fonts, Video and Audio, DOM and style scripting through JavaScript, and more in a small library. Your SVG content can be embedded directly into normal HTML 5 or through the OBJECT tag. This project is currently in Beta stage development. It should also be noted that while Google has contributed to this project, Google is not providing support for this project. One Minute Intro Demos More demos can be seen with the demo viewer; keep in mind that not all of the demos in the demo viewer work. Getting Started A Quick Start guide is available to get going fast. Also, if you are using SVG Web in your own project please add yourself to the ProjectsUsingSVGWeb page! Videos What's New

7 Steps to deploy new Rails app in Appfog | SimpleTechBlog Without deploying an app, which is created in your machine, you can never be sure of whether it will be working same in the LIVE environment or not. And for making anything live on the web, you need to pay and buy a sunscription service. We do have the options of Heroku which gets well integrated with the Git but still we loose upon the control on the app. A good solution is AppFog which provides FREE account with 2GB RAM for your apps. You get better control of the services associated with the apps and as well can control the start / stop and restart of the same through a web interface. Since I was able to successfully deploy my Rails app in appfog, I am just mentioning the steps which needs to be followed for the same. 1. 2. 3. Provide your email address and password as the login credentials. 4. The ruby runtime is mentioned in the above command because without this, my app did not work. Logs: 5. 6. After this your all assets like css, etc will come to life in production environment. 6.

How to Put SVG Graphics on Your Web Pages - Adding SVG to HTML SVG or Scalable Vector Graphics let you draw much more complex images and have them rendered on web pages. But you can't simply take the SVG tags and slap them into your HTML. They won't show up and your page will be invalid. Instead, you have to use one of three methods. Use the object Tag to Embed SVG The HTML object tag will embed an SVG graphic in your web page. For cross-browser compatibility, you should include the type attribute (it should read type="image/svg+xml") and a codebase for browsers that don't support it (Internet Explorer 8 and lower). Your object would look like this: Tips for Using object for SVG Make sure that the width and height are at least as large as the image you are embedding. View an SVG in an object tag example. Embed SVG with the embed Tag Another option you have for including SVG is to use the embed tag. Your embed would look like this: Tips for Using embed for SVG View an SVG in an embed tag example. Use an iframe to Include SVG Your iframe would look like this:

<< Dinks >> Using SVG Learn Development at Frontend Masters SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator. You can use SVG on the web pretty easily, but there is plenty you should know. Why use SVG at all? Small file sizes that compress wellScales to any size without losing clarity (except very tiny)Looks great on retina displaysDesign control like interactivity and filters Getting some SVG to work with Design something in Adobe Illustrator. Notice the artboard is cropped up right against the edges of the design. You can save the file directly from Adobe Illustrator as an SVG file. As you save it, you’ll get another dialog for SVG Options. The interesting part here is that you can either press OK and save the file, or press “SVG Code…” and it will open TextEdit (on a Mac anyway) with the SVG code in it. Both can be useful. Using SVG as an <img> If I save the SVG to a file, I can use it directly in an <img> tag. if (! <svg ...

Related: